vue中实现移动端的scroll滚动方法


Posted in Javascript onMarch 03, 2018

一、首先安装安装

npm install better-scroll --save

二、 并在组件中引用

import BScroll from ‘better-scroll'

template中引用指向将要滚动的DOM元素

根据官方文档ref属性的说明,我们可以这样将DOM元素引用

vue中实现移动端的scroll滚动方法

vue中实现移动端的scroll滚动方法

三、 在methods中注册_initScroll方法,这个方法是对better-scroll的实例化,并且这个方法将来会在页面DOM结构渲染后被执行

methods: {
   _initScroll(){
    this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
    this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
   }
  }
 }

四、在created()方法中,后台数据获取成功之后的回调中,调用_initScroll();

Vue 更新数据时是异步的,所以在数据未加载完全之前,Bscroll无法获取目标内容的高度,所以会导致无法滚动的现象

这里一定要注意,数据获取成功后,直接Dom不一定是数据获取之后的渲染,所以要利用this.nextTick()方法,在this.nextTick的回调中使用_initScroll();

看看官方关于this.$nextTick()的说明

vue中实现移动端的scroll滚动方法

所以我们在项目中应该这样书写:

vue中实现移动端的scroll滚动方法

以上这篇vue中实现移动端的scroll滚动方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
vue生命周期实例小结
Aug 15 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 #Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 #Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 #Javascript
js操作二进制数据方法
Mar 03 #Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 #Javascript
Vue的轮播图组件实现方法
Mar 03 #Javascript
在Vue中使用Compass的方法
Mar 02 #Javascript
You might like
给多个地址发邮件的类
2006/10/09 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
JS简单计算器实例
2015/01/20 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
js实现无缝滚动图
2017/02/22 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
python 实现堆排序算法代码
2012/06/05 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
风险评估实施方案
2014/03/09 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
奖金申请报告模板
2015/05/15 职场文书
电影建党伟业观后感
2015/06/01 职场文书
高一英语教学反思
2016/03/03 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js