美文网首页
better-scroll在sell-goods中的应用及详解

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

作者: 焦迈奇 | 来源:发表于2018-09-30 22:33 被阅读0次

    better-scroll用法

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

    1. 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

    相关文章

      网友评论

          本文标题:better-scroll在sell-goods中的应用及详解

          本文链接:https://www.haomeiwen.com/subject/hpxgoftx.html