Vue cli+mui 区域滚动的实例代码
编程学习 2021-07-04 17:33www.dzhlxh.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家分享一篇Vue cli+mui 区域滚动的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
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>
狼蚁网站SEO优化粘贴我代码的一部分
<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>
狼蚁网站SEO优化写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 区域滚动的实例代码就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。