Vue cli+mui 區(qū)域滾動的實例代碼
更新時間：2018年01月25日 09:02:48 作者：qq_36947128
下面小編就為大家分享一篇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ù)越大，滾動速度越慢，滾動距離越小，默認值0.0006
});
})
}
});
},
};
</script>
這樣就實現(xiàn)vue cli+mui區(qū)域滾動了。
以上這篇Vue cli+mui 區(qū)域滾動的實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用vue打包時gzip壓縮的兩種方案小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
elementui使用el-upload組件實現(xiàn)自定義上傳的詳細步驟
upload上傳是前端開發(fā)很常用的一個功能,在Vue開發(fā)中常用的Element組件庫也提供了非常好用的upload組件,這篇文章主要給大家介紹了關(guān)于elementui使用el-upload組件實現(xiàn)自定義上傳的詳細步驟,需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇vue 純js監(jiān)聽滾動條到底部的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue打包生成的文件的js文件過大的優(yōu)化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue ref如何獲取子組件屬性值。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
最近領(lǐng)導(dǎo)交我一個項目是使用 vue-cli 搭建的單頁面應(yīng)用。下面小編通過本文給大家介紹vue將單頁面改造成多頁面應(yīng)用的方法 ，感興趣的朋友一起看看吧2018-11-11
本文主要介紹了vue實現(xiàn)監(jiān)控視頻直播的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單
這篇文章主要為大家詳細介紹了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
過去在Vue2中,我們采用ref來獲取標簽的信息,用以替代傳統(tǒng) js 中的 DOM 行為,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue項目表單校驗的相關(guān)資料,前端表單校驗?zāi)軠p少無效請求,保護后端接口,使用ElementPlus表單組件進行校驗,需要準備表單對象、規(guī)則對象并進行雙向綁定,用戶名、密碼以及協(xié)議勾選等字段都需符合特定規(guī)則,需要的朋友可以參考下2024-10-10