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

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