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区域滚动了