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 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
vue实现户籍管理系统
May 29 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
openPNE常用方法分享
2011/11/29 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
原生js生成图片验证码
2020/10/11 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
Python读写文件方法总结
2015/06/09 Python
Python切片知识解析
2016/03/06 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
python简单商城购物车实例代码
2018/03/15 Python
Flask之flask-session的具体使用
2018/07/26 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
法学毕业生自我鉴定
2013/11/08 职场文书
简历的自荐信
2013/12/19 职场文书
退休感言
2014/01/28 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
访谈节目策划方案
2014/05/15 职场文书
自我查摆剖析材料
2014/10/11 职场文书
护理自荐信
2019/05/14 职场文书
承诺书应该怎么写?
2019/09/10 职场文书