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 相关文章推荐
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
Node.js操作系统OS模块用法分析
Jan 04 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php无序树实现方法
2015/07/28 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
Python异常处理总结
2014/08/15 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
医院院务公开实施方案
2014/05/03 职场文书
考试诚信承诺书
2014/05/23 职场文书
校车安全责任书
2014/08/25 职场文书
护士求职自荐信
2015/03/25 职场文书
开票证明
2015/06/23 职场文书
会计做账心得体会
2016/01/22 职场文书
AngularJS实现多级下拉框
2022/03/25 Javascript