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

 更新时间:2018年01月25日 09:02:48   作者:qq_36947128  
下面小编就为大家分享一篇Vue cli+mui 区域滚动的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

相关文章

  • 使用vue打包时gzip压缩的两种方案

    使用vue打包时gzip压缩的两种方案

    这篇文章主要介绍了使用vue打包时gzip压缩的两种方案小结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • elementui使用el-upload组件实现自定义上传的详细步骤

    elementui使用el-upload组件实现自定义上传的详细步骤

    upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件,这篇文章主要给大家介绍了关于elementui使用el-upload组件实现自定义上传的详细步骤,需要的朋友可以参考下
    2023-12-12
  • vue 纯js监听滚动条到底部的实例讲解

    vue 纯js监听滚动条到底部的实例讲解

    今天小编就为大家分享一篇vue 纯js监听滚动条到底部的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue打包生成的文件的js文件过大的优化方式

    vue打包生成的文件的js文件过大的优化方式

    这篇文章主要介绍了vue打包生成的文件的js文件过大的优化方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue ref如何获取子组件属性值

    vue ref如何获取子组件属性值

    这篇文章主要介绍了vue ref如何获取子组件属性值。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue将单页面改造成多页面应用的方法

    vue将单页面改造成多页面应用的方法

    最近领导交我一个项目是使用 vue-cli 搭建的单页面应用。下面小编通过本文给大家介绍vue将单页面改造成多页面应用的方法 ,感兴趣的朋友一起看看吧
    2018-11-11
  • vue实现监控视频直播的示例代码

    vue实现监控视频直播的示例代码

    本文主要介绍了vue实现监控视频直播的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • vue在table表中悬浮显示数据及右键菜单

    vue在table表中悬浮显示数据及右键菜单

    这篇文章主要为大家详细介绍了vue在table表中悬浮显示数据及右键菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 一篇文章搞懂Vue3中如何使用ref获取元素节点

    一篇文章搞懂Vue3中如何使用ref获取元素节点

    过去在Vue2中,我们采用ref来获取标签的信息,用以替代传统 js 中的 DOM 行为,下面这篇文章主要给大家介绍了关于如何通过一篇文章搞懂Vue3中如何使用ref获取元素节点的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue项目的表单校验实战指南

    Vue项目的表单校验实战指南

    这篇文章主要介绍了Vue项目表单校验的相关资料,前端表单校验能减少无效请求,保护后端接口,使用ElementPlus表单组件进行校验,需要准备表单对象、规则对象并进行双向绑定,用户名、密码以及协议勾选等字段都需符合特定规则,需要的朋友可以参考下
    2024-10-10

最新评论