在專案中經常用到滾動，結合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;
    width: 100%;
    top: 88px;
    bottom: 0;
}
.recommend-content {
    height: 100%;
    overflow: hidden;
}

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