better-scroll在sell-goods中的应用及详解

better-scroll用法

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

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

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

better-scroll 对外暴露了一个 BScroll 的类，我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象，第二个是一些配置参数。
better-scroll 的初始化时机很重要,我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果没有办法滑动，那就是初始化的时机不对。

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

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

sell-goods组件中的问题

先介绍一下左右俩边实现同步的原理

• 当右边滑动时，左边实现同步
  在data中定义listHeight[]数组，记录每一个产品分类的高度和它之上所有的产品高度;在data中同时定义scrollY=0;并实时记录scrollY的值与它上下俩个产品的高度比较，在组件内判断当前产品的下标是否与所得下标相等，实时绑定class来改变此时左边的样式。
• 当左边点击时，右边同步跳转
  拿到当前点击的产品的下标，传入selectMenu函数,通过在所有的产品中找到该产品元素后，让他滚动到位置。
  this.foodsScroll.scrollToElement(el, 300);

1. 首先我们先来看一下1.0 和2.0 版本上的区别

• dom元素的获取
  1.0中 v-el='a-b'值是在js中引用的元素名，可以不同
  2.0中 rel='aB'
  二者的命名遵循的规则不同
• 在js中的引用作为BScroll实例的参数传入
  1.0 this.$els.a-b
  2.0 this.$rels.aB

2. 当我们初始化的时候，即没有给第二个参数即配置信息时，
   this.menuScroll = new BScroll(this.$refs.menuWrapper);
   默认在移动端阻止了默认的事件click，所以我们获取不到正确的下标，
   然而pc端浏览器依然可以执行原生的click事件，在pc情况下我们可以获取到下标
   （当给定第二个参数click:true时）

this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true
      });

此时pc端会派发俩次点击事件，俩次得到下标，显然是不合理的，我们通过移动端派发的点击事件独有的event._constructed属性来监控此时的派发点击事件的次数。

3. probeType

• 类型：Number
• 默认值：0
• 可选值：1、2、3
• 作用：有时候我们需要知道滚动的位置。

1. 当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发[scroll 事件；
2. 当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
3. 当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。

初始化时
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        probeType: 3
      });
this.foodsScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
      });

一篇很详细的文章推荐https://www.imooc.com/article/18232