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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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
初探PHP5
2006/10/09 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
PHP数据过滤的方法
2013/10/30 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
python生成IP段的方法
2015/07/07 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python设置环境变量的作用整理
2020/02/17 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
大四自我鉴定
2014/02/08 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
画展邀请函
2015/01/31 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript