下面我就为大家分享一篇Vue cli+mui 区域滚动的实例代码,具有很好的参考价值,希望对大家有所帮助。

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

第一步 引入mui css js

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

JS

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

第二步

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

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

下面粘贴我代码的一部分

<p class="goods_foods mui-scroll-wrapper"> <p 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"> <p class="icon"><img :src="food.icon" width="57"height="57"></p> <p class="content"> <p class="content mui-media-body"> <h4 class="aname">{{food.name}}</h4> <p class="dese mui-ellipsis">{{food.description}}</p> </p> <p class="extar"> <span>月售{{food.sellCount}}</span> <span>好评率{{food.rating}}%</span> </p> <p class="price"> <span class="now">¥{{food.price}}</span> <span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span> </p> </p> </li> </ul> </li> </ul> </p> </p>

下面写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中如何使用ztree(详细教程)

使用JS如何实现瀑布流插件

在JS中如何实现将html转为pdf功能