Issues related to area scrolling using cli+mui in Vue

Below I will share with you an example code of Vue cli mui area scrolling. It has a good reference value and I hope it will be helpful to everyone.

vue cli mui is used together to achieve the effect of area rolling. The method is as follows

The first step is to introduce mui css js

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

JS

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

Step 2

Write the area scrolling structure of structure mui It’s like this

<p class="mui-scroll-wrapper"> 
<p class="mui-scroll"> 
 *写需要滚动的内容 
</p> 
</p>

Paste part of my code below

 <p class="goods_foods mui-scroll-wrapper">
		 <p class="mui-scroll">
		 <ul class="mui-table-view">
		 	<li v-for="item in goods">
		 		<h5 id="item-name">{{item.name}}</h5>
		 		<ul class="mui-table-view">
		 			<li v-for="food in item.foods" class="mui-table-view-cell item">
		 				<p class="icon"><img  src="/static/imghwm/default1.png"  data-src="food.icon"  class="lazy"  :    style="max-width:90%" style="max-width:90%" alt="Issues related to area scrolling using cli+mui in Vue" ></p>
		 				<p class="content">
		 				<p class="content mui-media-body">
		 					<h4 id="food-name">{{food.name}}</h4>
		 					<p class="dese mui-ellipsis">{{food.description}}</p>
		 				</p>
		 				<p class="extar">
		 					<span>月售{{food.sellCount}}</span>
		 					<span>好评率{{food.rating}}%</span>
		 				</p>
		 				<p class="price">
		 					<span class="now">￥{{food.price}}</span>
		 					<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
		 				</p>
		 				</p>
		 			</li>
		 		</ul>
		 	</li>
		 	
		 </ul>
		</p>
		 
		 </p>

Write JS below

<script>
 import mui from &#39;../../../static/mui.min.js&#39;
	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(&#39;.mui-scroll-wrapper&#39;).scroll({
                    deceleration: 0.0005 
//flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
					})
				}
			});
		},
	};
</script>

This will implement vue cli The mui area is scrolled.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use ztree in vue (detailed tutorial)

How to implement waterfall flow plug-in using JS

How to implement the function of converting html to pdf in JS

How to implement the pasteboard copy function using JS

The above is the detailed content of Issues related to area scrolling using cli+mui in Vue. For more information, please follow other related articles on the PHP Chinese website!