Vue cli+mui 區(qū)域滾動(dòng)的實(shí)例代碼
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">
<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>好評(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>
這樣就實(shí)現(xiàn)vue cli+mui區(qū)域滾動(dòng)了。
以上這篇Vue cli+mui 區(qū)域滾動(dòng)的實(shí)例代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟
upload上傳是前端開發(fā)很常用的一個(gè)功能,在Vue開發(fā)中常用的Element組件庫也提供了非常好用的upload組件,這篇文章主要給大家介紹了關(guān)于elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟,需要的朋友可以參考下2023-12-12
vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解
今天小編就為大家分享一篇vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼
本文主要介紹了vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單
這篇文章主要為大家詳細(xì)介紹了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點(diǎn)
過去在Vue2中,我們采用ref來獲取標(biāo)簽的信息,用以替代傳統(tǒng) js 中的 DOM 行為,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue項(xiàng)目的表單校驗(yàn)實(shí)戰(zhàn)指南
這篇文章主要介紹了Vue項(xiàng)目表單校驗(yàn)的相關(guān)資料,前端表單校驗(yàn)?zāi)軠p少無效請(qǐng)求,保護(hù)后端接口,使用ElementPlus表單組件進(jìn)行校驗(yàn),需要準(zhǔn)備表單對(duì)象、規(guī)則對(duì)象并進(jìn)行雙向綁定,用戶名、密碼以及協(xié)議勾選等字段都需符合特定規(guī)則,需要的朋友可以參考下2024-10-10

