better-scroll上拉加載，下拉刷新

<template>
  <div class="wrapper" ref="wrapper">
    <div>
      <load-more v-show="topLoad" tip="正在刷新"></load-more>
      <slot></slot>
      <load-more v-show="bottomLoad" :tip="loadText"></load-more>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import { LoadMore } from 'vux'
export default {
  name: 'scroll',
  components: {
    LoadMore
  },
  props: {
    loadText: {
      type: String,
      default: ''
    },
    topLoad: {
      type: Boolean,
      default: false
    },
    bottomLoad: {
      type: Boolean,
      default: false
    },
    totalcount: {
      type: String,
      default: ''
    },
    probeType: {
      type: Number,
      default: 1
    },
    click: {
      type: Boolean,
      default: true
    },
    scrollX: {
      type: Boolean,
      default: false
    },
    listenScroll: {
      type: Boolean,
      default: false
    },
    // 用戶下拉加載
    pullDownRefresh: {
      type: Boolean,
      default: true
    },
    // 用戶上啦刷新
    pullUpLoad: {
      type: Boolean,
      default: false
    },
    listData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  mounted () {
    // 保證在DOM渲染完畢後初始化better-scroll
    setTimeout(() => {
      this._initScroll()
    }, 20)
  },
  methods: {
    _initScroll () {
      if (!this.$refs.wrapper) {
        return false
      }
      // better-scroll初始化
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: this.click,
        pullUpLoad: {
          threshold: -50 // 負值是當上拉到超太低部 30px；正值是距離底部距離時
        },
        pullDownRefresh: {
          threshold: 50,
          stop: 20
        }
      })
      // 是否派發滾動到底部事件，用於上拉加載
      if (this.pullUpLoad) {
        this.scroll.on('pullingUp', () => {
          // 滾動到底部
          this.$emit('scrollToEnd')
          this.scroll.finishPullUp()
        })
      }
      // 是否派發頂部下拉事件，用於下拉刷新
      if (this.pullDownRefresh) {
        this.scroll.on('pullingDown', (pos) => {
          // 下拉動做
          this.$emit('pulldown')
          this.scroll.finishPullDown()
        })
      }
    },
    disable () {
      // 代理better-scroll的disable方法
      this.scroll && this.scroll.disable()
    },
    enable () {
      // 代理better-scroll的enable方法
      this.scroll && this.scroll.enable()
    },
    refresh () {
      // console.log('refresh')
      // 代理better-scroll的refresh方法
      this.scroll && this.scroll.refresh()
    },
    scrollTo () {
      // 代理better-scroll的scrollTo方法
      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
    }
  },
  watch: {
    listData () {
      setTimeout(() => {
        this.refresh()
      }, 20)
    },
    bottomLoad () {
      setTimeout(() => {
        this.refresh()
      }, 20)
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
  width: 100%;
  height: 95%;
  position: relative;
  .weui-loadmore{
    width: 100%;
    margin: .1rem 0;
  }
}
</style>