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字符串替换及字符串分割示例代码
Dec 12 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 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 验证码实例代码
2010/06/01 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
QML使用Python的函数过程解析
2019/09/26 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Python如何定义有默认参数的函数
2020/08/10 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
财务管理专业推荐信
2013/11/19 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
优质服务活动实施方案
2014/05/02 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
迟到检讨书范文
2015/01/27 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python