vue中如何实现移动端的scroll滚动-木庄网络博客

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来vue中如何实现移动端的scroll滚动，vue中实现移动端scroll滚动的注意事项有哪些，下面就是实战案例，一起来看一下。

一、首先安装安装

1	`npm install better-scroll --save`

二、并在组件中引用

1	`import BScroll from ‘better-scroll'`

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

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

三、在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()的说明

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

阅读剩余部分

相关阅读 >>

滚动条的简单实现

html代码制作滚动文字

marquee元素如何实现滚动字体与图片的效果

element-ui如何操作table滚动效果

html5手机开发-滚动和惯性缓动的代码实例

基于html5陀螺仪实现移动动画效果

html5中当鼠标滚轮正在被滚动时运行的脚本的事件onmousewheel

h5之scrollintoview用法详解

如何解决滚动条样式问题

html5触摸事件实现移动端简易进度条的实现方法

更多相关阅读请进入《scroll》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » vue中如何实现移动端的scroll滚动

vue中如何实现移动端的scroll滚动

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论