Vue cli+mui 地區滾動的執行個體代碼，climui

Vue cli+mui 地區滾動的執行個體代碼，climui

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 地區滾動的執行個體代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。