Vue 滚动插件BetterScroll 封装下拉刷新、上拉触底 (待优化)

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper, {})

BScroll初始化时机

 

mounted() {
    this.$nextTick(() => {
        this.scroll = new Bscroll(this.$refs.wrapper, {})
    })
}

 

如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。

 

异步数据的处理

 

created() { 
    requestData().then((res) => { 
        this.data = res.data this.$nextTick(() => { 
            this.scroll = new Bscroll(this.$refs.wrapper, {}) 
        }) 
    }) 
}

（为什么这里在 created 这个钩子函数里请求数据而不是放到 mounted 的钩子函数里？因为 requestData 是发送一个网络请求，这是一个异步过程，当拿到响应数据的时候，Vue 的 DOM 早就已经渲染好了，但是数据改变 —> DOM 重新渲染仍然是一个异步过程，所以即使在我们拿到数据后，也要异步初始化 better-scroll。）

 

动态获取数据并刷新BScroll

 

created() {
  this.loadData()
},
methods: {
  loadData() {
    requestData().then((res) => {
      this.data = res.data.concat(this.data)
      this.$nextTick(() => {
        if (!this.scroll) { // 判断是否初始化new BScroll 
          this.scroll = new Bscroll(this.$refs.wrapper, {})
          this.scroll.on('touchend', (pos) => { // 下拉动作 
            if (pos.y > 50) { this.loadData() }
          })
        } else { this.scroll.refresh() }
      })
    })
  }
}

 

封装better-scroll (包含，下拉刷新，到底加载更多)

引入使用 

      

        

          

            00{{i}}
          
加载中