首页 > web前端 > js教程 > 正文

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

亚连
发布: 2018-06-09 15:52:51
原创
1987人浏览过

下面我就为大家分享一篇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 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">@@##@@</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中如何使用ztree(详细教程)

使用JS如何实现瀑布流插件

在JS中如何实现将html转为pdf功能

使用JS如何实现粘贴板复制功能

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

以上就是在Vue中使用cli+mui有关区域滚动问题的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号