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

@import url("/static/mui.min.css"); 

import mui from '../../../static/mui.min.js'; 

<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="/UploadFiles/2021-04-02/food.icon">

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