未加星标

Vue cli+mui 区域滚动的实例代码

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

vue cli+mui配合使用达到区域滚到的效果 ,方法如下

第一步 引入mui css js

@import url("/static/mui.min.css");

JS

import mui from '../../../static/mui.min.js';

第二步

写结构 mui的区域滚动结构是这样的

<div class="mui-scroll-wrapper">
<div class="mui-scroll">
*写需要滚动的内容
</div>
</div>

下面粘贴我代码的一部分

<div class="goods_foods mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li v-for="item in goods">
<h5 class="atitle">{{item.name}}</h5>
<ul class="mui-table-view">
<li v-for="food in item.foods" class="mui-table-view-cell item">
<div class="icon"><img :src="food.icon" width="57"height="57"></div>
<div class="content">
<div class="content mui-media-body">
<h4 class="aname">{{food.name}}</h4>
<p class="dese mui-ellipsis">{{food.description}}</p>
</div>
<div class="extar">
<span>月售{{food.sellCount}}</span>
<span>好评率{{food.rating}}%</span>
</div>
<div class="price">
<span class="now">¥{{food.price}}</span>
<span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
</div>
</div>
</li>
</ul>
</li>

</ul>
</div>

</div>

下面写JS

<script>
import mui from '../../../static/mui.min.js'
const odd_ok=0;
export default {
props:{
seller:{
type:Object
}
},
data(){
return{
goods:[]
}
},
created(){
this.$http.get("/api/goods").then((response) => {
response=response.body;
if(response.errno===odd_ok){
this.goods=response.data;
this.$nextTick( () => {
mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005
//flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
})
}
});
},
};
</script>

这样就实现vue cli+mui区域滚动了。

以上这篇Vue cli+mui 区域滚动的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。


本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: gt,lt,div,mui,class,food,span,scroll,response,goods,滚动,cli+mui,li,ul
分页:12
转载请注明
本文标题:Vue cli+mui 区域滚动的实例代码
本站链接:http://www.codesec.net/view/571647.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(34)