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 数组的方法集合
Jun 05 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
Aug 16 Javascript
移动端手指操控左右滑动的菜单
Sep 08 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图片上传存储源码并且可以预览
2011/08/26 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
手机端转换rem适应
2017/04/01 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Keras自定义IOU方式
2020/06/10 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
大学生收银员求职信分享
2014/01/02 职场文书
运动会广播稿60字
2014/01/15 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
工作证明英文模板
2014/10/21 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS