Vue cli+mui 区域滚动的实例代码

vuecli+mui配合使用达到区域滚到的效果，方法如下第一步引入muicssjs@importurl("/static/mui.min.css")

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 区域滚动的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。