vue_music:封装scroll.vue组件

在项目中经常用到滚动，结合Better-scroll封装了sroll.vue组件
参考链接：https://ustbhuangyi.github.io...
http://www.imooc.com/article/...
**better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略**。

1.html部分

这个很简单，有一个插槽slot
**better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。**

<template>
    <div ref="wrapper">
        <slot></slot>
    </div>
</template>

2.功能

1. 滚动特性props：是否截流滚动、是否派发事件、是否有数据传入
2. 初始化Better-scroll

export default {
  props: {
    probeType: {
       //有时候我们需要知道滚动的位置。
       //当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后:截流）派发scroll 事件；
       //当 probeType 为 2 的时候，会在屏幕滑动的过程中实时（不截流）的派发 scroll 事件；
       //当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum（回弹） 滚动动画运行过程中实时派发 scroll 事件。
       //如果没有设置该值，其默认值为 0，即不派发 scroll 事件
      type: Number,
      default: 1
    },
    click: {
      //click是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，
      //可以用event._constructed判断，为true,则是betterscroll派发的
      type: Boolean,
      defalut: true
    },
    data: {
      //滚动的界面是否有了数据（这些数据多数是异步获取的）
      //根据这个当有数据的时候refresh,在watch中有相关逻辑
      type: Array,
      default: null
    },
    listenScroll: {
      //是否派发滚动位置
      type: Boolean,
      default: false
    },
    //实现上拉刷新
    pullup: {
        type: Boolean,
        default: false
    },
    //实现下拉刷新
    pulldown: {
      type: Boolean,
      default: false
    },
    //开始滚动的时候派发一个事件
    beforeScroll: {
        type: Boolean,
        default: false
    }
  },
  data() {
    return {

    }
  },
  mounted() {
    setTimeout(() => {
      this._initScroll()  //初始化
    }, 20)
  },
  methods: {
    _initScroll() {
      if (!this.$refs.wrapper) {
        return
      }
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: this.click
      })
      //派发滚动位置
      if (this.listenScroll) {
        let me = this
        this.scroll.on('scroll', (pos) => {
          //pos.y
          //往上滑动负数，往下滑动正数
          me.$emit('scroll', pos)
        })
      }
      //上拉刷新，滚动到底部派发一个事件
      if (this.pullup) {
          this.scroll.on('scrollEnd', () => {
              if(this.scroll.y <= (this.scroll.maxScrollY + 50)) {
                  this.$emit('scrllToEnd')
              }
          })
      }
      //是否派发顶部下拉事件，用于下拉刷新
      if (this.pulldown) {
        this.scroll.on('touchend', (pos) => {
          //下拉动作
          if (pos.y > 50) {
            this.$emit('pulldown')
          }
        })
      }
      //开始滚动的时候派发一个事件
      //比如，搜索下拉框，滚动下拉框的时候，派发开始滚动事件，从而收起键盘
      if (this.beforeScroll) {
          this.scroll.on('beforeScrollStart', () => {
              this.$emit('beforeScroll')
          })
      }
    },
    enable() {
      this.scroll && this.scroll.enable()
    },
    disable() {
      this.scroll && this.scroll.disable()
    },
    refresh() {
      this.scroll && this.scroll.refresh()
    },
    scrollTo() {
      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
    },
    scrollToElement() {
      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
    }
  },
  watch: {
    data() {
      setTimeout(() => {
        this.refresh()
      }, 20)
    }
  }
}

3.使用

在recommend.vue中使用

注：样式

//控制高度才能滚动
.recommend {
    position: fixed;
     100%;
    top: 88px;
    bottom: 0;
}
.recommend-content {
    height: 100%;
    overflow: hidden;
}

原文地址：https://segmentfault.com/a/1190000016979411