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.js 混入(mixins)

    深入了解Vue.js 混入(mixins)

    这篇文章主要介绍了Vue.js 混入的相关资料,文中讲解非常细致,示例代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 网站国际化多语言处理工具i18n安装使用方法图文详解

    网站国际化多语言处理工具i18n安装使用方法图文详解

    国际化是设计软件应用的过程中应用被使用与不同语言和地区,下面这篇文章主要给大家介绍了关于网站国际化多语言处理工具i18n安装使用方法的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vuejs实现本地数据的筛选分页功能思路详解

    vuejs实现本地数据的筛选分页功能思路详解

    今天做项目需要一份根据本地数据的筛选分页功能,下面小编把vuejs实现本地数据的筛选分页功能的实现思路分享到脚本之家平台,需要的朋友可以参考下
    2017-11-11
  • vue2老项目vite升级改造过程记录

    vue2老项目vite升级改造过程记录

    目前vite主要默认是支持给vue3使用的,并且如果使用官方的cli创建的项目一样会默认使用vue3去构建项目,此时对于一些vue2的老项目就显得不友好了,下面这篇文章主要给大家介绍了关于vue2老项目vite升级改造的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue做移动端适配最佳解决方案(亲测有效)

    vue做移动端适配最佳解决方案(亲测有效)

    这篇文章主要介绍了vue做移动端适配最佳解决方案(亲测有效),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue input输入框回车以后自动刷新页面(直播程序)

    Vue input输入框回车以后自动刷新页面(直播程序)

    这篇文章主要介绍了直播程序,Vue input输入框回车以后自动刷新页面,适用场景是在输入框输入字符并按下回车键搜索时,刷新页面,需要的朋友参考下实现代码
    2023-01-01
  • vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知

    vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知

    这篇文章主要介绍了vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue jsx 使用指南及vue.js 使用jsx语法的方法

    vue jsx 使用指南及vue.js 使用jsx语法的方法

    这篇文章主要介绍了vue jsx 使用指南及vue.js 使用jsx语法的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11
  • vue调用swiper插件步骤教程(最易理解且详细)

    vue调用swiper插件步骤教程(最易理解且详细)

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    这篇文章主要介绍了vue中v-model动态生成的实例详解的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容,需要的朋友可以参考下
    2017-10-10

最新评论