vue2.0高仿饿了么better-scroll

首先安装better-scroll

npm i better-scroll -S

goods页面模板

js

better-scroll用法

我们先来看一下 better-scroll 常见的 html 结构:

当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 better-scroll 的滚动原理。

 import BScroll from 'better-scroll'
 let wrapper = document.querySelector('.wrapper')
 let scroll = new BScroll(wrapper, {})

better-scroll 对外暴露了一个 BScroll 的类,我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象,第二个是一些配置参数。 
better-scroll 的初始化时机很重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,来决定是否可以纵向和横向滚动。因此,我们在初始化它的时候,必须确保父元素和子元素的内容已经正确渲染了。如果没有办法滑动,那就是初始化的时机不对。 
饿了么是这样处理的:

mounted() {
   this.$nextTick(() => {
    this.scroll = new Bscroll(this.$refs.wrapper, {}) }) 
   }

this.$nextTick()这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来 
如果不在下面的this.$nextTick()方法里回调这个方法,数据改变后再来计算滚动轴就会出错

转载于:https://www.cnblogs.com/qwert1/p/8418205.html

你可能感兴趣的:(vue2.0高仿饿了么better-scroll)