Problèmes liés au défilement de zone à l'aide de cli+mui dans Vue

Maintenant, je vais partager avec vous un exemple de code de défilement de zone Vue cli+mui. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

vue cli+mui est utilisé ensemble pour obtenir l'effet de défilement de zone. La méthode est la suivante

La première étape consiste à introduire mui css js

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

JS

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

Étape 2

Écrire la structure La structure de défilement des zones de mui est comme ceci

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

Coller une partie de mon code ci-dessous

 <p class="goods_foods mui-scroll-wrapper">
		 <p 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">
		 				<p class="icon"><img :src="food.icon" width="57"height="57"></p>
		 				<p class="content">
		 				<p class="content mui-media-body">
		 					<h4 class="aname">{{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>

Écrire JS ci-dessous

<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>

De cette façon, le défilement de la zone vue cli+mui est obtenu.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser ztree dans vue (tutoriel détaillé)

Comment implémenter le plug-in de flux en cascade à l'aide de JS

Comment convertir du HTML en PDF en JS

Comment utiliser JS pour réaliser la fonction de copie sur carton

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!