vue中实现移动端的scroll滚动 - Go语言中文社区

vue中实现移动端的scroll滚动

一、首先安装安装

npm install better-scroll --save

二、 并在组件中引用

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()的说明
这里写图片描述

所以我们在项目中应该这样书写：
这里写图片描述

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/github_38861674/article/details/76597031
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2020-03-07 09:36:21
  • 阅读 ( 709 )
  • 分类：前端

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！