Vue cli+mui 區(qū)域滾動的實例代碼
vue cli+mui配合使用達到區(qū)域滾到的效果 ,方法如下
第一步 引入mui css js
@import url("/static/mui.min.css");
JS
import mui from '../../../static/mui.min.js';
第二步
寫結(jié)構(gòu) mui的區(qū)域滾動結(jié)構(gòu)是這樣的
<div class="mui-scroll-wrapper"> <div class="mui-scroll"> *寫需要滾動的內(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>好評率{{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ù)越大,滾動速度越慢,滾動距離越小,默認(rèn)值0.0006
});
})
}
});
},
};
</script>
這樣就實現(xiàn)vue cli+mui區(qū)域滾動了。
以上這篇Vue cli+mui 區(qū)域滾動的實例代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
unplugin-auto-import的配置以及eslint報錯解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個插件的自動導(dǎo)入,也支持自定義插件的自動導(dǎo)入,是一個功能強大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報錯解決的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue?Router?返回后記住滾動條位置的實現(xiàn)方法
使用?Vue?router?創(chuàng)建?SPA(Single?Page?App),往往有這種需求:首頁是列表頁,點擊列表項進入詳情頁,在詳情頁點擊返回首頁后,希望看到的是,首頁不刷新,并且滾動條停留在之前的位置,這篇文章主要介紹了Vue?Router?返回后記住滾動條位置的實現(xiàn)方法,需要的朋友可以參考下2023-09-09
Vue.js綁定HTML class數(shù)組語法錯誤的原因分析
Vue.js綁定HTML class數(shù)組語法錯誤有哪些原因?qū)е碌哪?,該如何解決呢?下面小編給大家分享Vue.js綁定HTML class數(shù)組語法錯誤的原因分析,感興趣的朋友一起看看吧2016-10-10
利用Vite搭建Vue3+ElementUI-Plus項目的全過程
vue3如今已經(jīng)成為默認(rèn)版本了,相信大多數(shù)公司已經(jīng)全面擁抱vue3了,下面這篇文章主要給大家介紹了關(guān)于利用Vite搭建Vue3+ElementUI-Plus項目的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
詳解基于vue-router的動態(tài)權(quán)限控制實現(xiàn)方案
本篇文章主要介紹了詳解基于vue-router的動態(tài)權(quán)限實現(xiàn)方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Windows系統(tǒng)下使用nginx部署vue2項目的全過程
nginx是一個高性能的HTTP和反向代理服務(wù)器,因此常用來做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Windows系統(tǒng)下使用nginx部署vue2項目的相關(guān)資料,需要的朋友可以參考下2023-03-03

