Vue에서 cli+mui를 사용한 영역 스크롤 관련 문제

이제 Vue cli+mui 영역 스크롤의 예제 코드를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

vue cli+mui를 함께 사용하면 영역 스크롤 효과를 얻을 수 있습니다. 방법은 다음과 같습니다

첫 번째 단계는 mui CSS js

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

JS

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

을 소개하는 것입니다. 두 번째 단계

쓰기 구조 mui의 영역 스크롤 구조는 다음과 같습니다

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

아래에 내 코드의 일부를 붙여넣으세요

 <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="Vue에서 cli+mui를 사용한 영역 스크롤 관련 문제" ></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>

아래에 JS를 작성하세요

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

이 방법으로 vue cli+mui 영역 스크롤은 깨달았다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

vue에서 ztree를 사용하는 방법(자세한 튜토리얼)

JS를 사용하여 폭포 흐름 플러그인을 구현하는 방법

JS에서 html을 pdf로 변환하는 기능을 구현하는 방법

JS를 활용한 페이스트보드 복사 기능 구현 방법

위 내용은 Vue에서 cli+mui를 사용한 영역 스크롤 관련 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!