Vue cli+mui 区域滚动的实例代码


Posted in Javascript onJanuary 25, 2018

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

第一步 引入mui css js

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

JS

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

第二步

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

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

下面粘贴我代码的一部分

<div class="goods_foods mui-scroll-wrapper">
		 <div 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">
		 				<div class="icon"><img :src="food.icon" width="57"height="57"></div>
		 				<div class="content">
		 				<div class="content mui-media-body">
		 					<h4 class="aname">{{food.name}}</h4>
		 					<p class="dese mui-ellipsis">{{food.description}}</p>
		 				</div>
		 				<div class="extar">
		 					<span>月售{{food.sellCount}}</span>
		 					<span>好评率{{food.rating}}%</span>
		 				</div>
		 				<div class="price">
		 					<span class="now">¥{{food.price}}</span>
		 					<span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
		 				</div>
		 				</div>
		 			</li>
		 		</ul>
		 	</li>
		 	
		 </ul>
		</div>
		 
		 </div>

下面写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 区域滚动的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
基于canvas实现手写签名(vue)
May 21 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 #Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 #Javascript
关于express与koa的使用对比详解
Jan 25 #Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 #Javascript
Vue框架之goods组件开发详解
Jan 25 #Javascript
前端MVVM框架解析之双向绑定
Jan 24 #Javascript
JS运动特效之完美运动框架实例分析
Jan 24 #Javascript
You might like
php下MYSQL limit的优化
2008/01/10 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
React简单介绍
2017/05/24 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
Python3.6正式版新特性预览
2016/12/15 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
python机器人运动范围问题的解答
2019/04/29 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
Python如何生成xml文件
2020/06/04 Python
敏捷开发的主要原则都有哪些
2015/04/26 面试题
质量工程师岗位职责
2013/11/16 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
学校隐患排查制度
2015/08/05 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
Python matplotlib多个子图绘制整合
2022/04/13 Python
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技