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 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
JS 表单验证大全
Nov 23 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
基于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 fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
es6数值的扩展方法
2019/03/11 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
学校爱心捐款倡议书
2014/05/13 职场文书
分公司经理任命书
2014/06/05 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
总经理岗位职责范本
2015/04/01 职场文书
员工表扬信怎么写
2015/05/05 职场文书