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

2018-09-30 本文已影响0人焦迈奇

better-scroll用法

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

<div class="wrapper">
 <ul class="content"> 
      <li></li>
      <li></li> 
      <li></li>
      <li></li> 
  </ul>
</div>

当 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);

<script type="text/ecmascript-6">
import BScroll from 'better-scroll';
const ERR_OK = 0;
export default{
  props: {
    seller: {
      type: Object
    }
  },
  data () {
    return {
      goods: [],
      listHeight: [],
      scrollY: 0
    };
  },
  computed: {
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          return i;
        }
      }
      return 0;
    }
  },
  created () {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    this.$http.get('/api/goods').then((response) => {
      response = response.body;
      if (response.errno === ERR_OK) {
        this.goods = response.data;
        this.$nextTick(() => {
          this._initScroll();
          this._calculateHeight();
        });
      }
    });
  },
  methods: {
    selectMenu (index, event) {
      if (!event._constructed) {
        return;
      }
      let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
      let el = foodList[index];
      this.foodsScroll.scrollToElement(el, 300);
    },
    _initScroll: function () {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true
      });
      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        probeType: 3
      });
      this.foodsScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
      });
    },
    _calculateHeight() {
      let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
    }
  }
};
</script>

首先我们先来看一下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

当我们初始化的时候，即没有给第二个参数即配置信息时，
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属性来监控此时的派发点击事件的次数。

probeType

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

当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发[scroll 事件；

当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；

当 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

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

better-scroll用法

sell-goods组件中的问题

probeType

猜你喜欢

热点阅读