下面我就為大家分享一篇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中使用cli+mui有關區域滾動問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!