您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Vue cli+mui區(qū)域滾動(dòng)的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
vue cli+mui配合使用達(dá)到區(qū)域滾到的效果 ,方法如下
第一步 引入mui css js
@import url("/static/mui.min.css");
JS
import mui from '../../../static/mui.min.js';
第二步
寫結(jié)構(gòu) mui的區(qū)域滾動(dòng)結(jié)構(gòu)是這樣的
<div class="mui-scroll-wrapper"> <div class="mui-scroll"> *寫需要滾動(dòng)的內(nèi)容 </div> </div>
下面粘貼我代碼的一部分
<div class="goods_foods mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view"> <li v-for="item in goods"> <h6 class="atitle">{{item.name}}</h6> <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"> <h5 class="aname">{{food.name}}</h5> <p class="dese mui-ellipsis">{{food.description}}</p> </div> <div class="extar"> <span>月售{{food.sellCount}}</span> <span>好評(píng)率{{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 減速系數(shù),系數(shù)越大,滾動(dòng)速度越慢,滾動(dòng)距離越小,默認(rèn)值0.0006 }); }) } }); }, }; </script>
關(guān)于“Vue cli+mui區(qū)域滾動(dòng)的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。