在Vue中使用cli+mui有关区域滚动问题-js教程-PHP中文网

在Vue中使用cli+mui有关区域滚动问题

亚连

发布： 2018-06-09 15:52:51

原创

2018人浏览过

下面我就为大家分享一篇vue cli+mui 区域滚动的实例代码，具有很好的参考价值，希望对大家有所帮助。

vue cli+mui配合使用达到区域滚到的效果，方法如下

第一步引入mui css js

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

登录后复制

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

登录后复制

第二步

立即学习“前端免费学习笔记（深入）”；

写结构 mui的区域滚动结构是这样的

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

查看详情

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

登录后复制

下面写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有关区域滚动问题的详细内容，更多请关注php中文网其它相关文章！