vue慕课网音乐项目手记：44-如何通过betterScroll组件实现上拉刷新-CSDN博客

本文链接：https://blog.csdn.net/weixin_40814356/article/details/80478440

首先呢：在scroll里面需要接收一个pullup的数据，来确定是否需要上拉刷新。

pullup: {
      type: Boolean,
      default: false
    }

如果有上拉刷新的选项，则在滚动条初始化的时候执行以下操作：

if (this.pullup) {
        // 如果有上拉刷新，就监听scrollEnd事件
        this.scroll.on('scrollEnd', () => {
          if (this.scroll.y <= this.scroll.maxScrollY + 50) {
            // 当滚动距离小于等于最大的滚动条的距 + 50 离的时候，向外传递一个scrollToEnd的事件
            this.$emit('scrollToEnd')
          }
        })
      }

在使用的组件里面去传递pullup的信息和监控scrollToEnd的事件：

<scroll class="suggest" :data="result" :pullup="pullup" @scrollToEnd="searchMore">

searchMore的事件如下：

searchMore () {
      this.page++
      search(this.query, this.page, this.showSinger, perpage).then((res) => {
        if (res.code === ERR_OK) {
          this.result = this.result.concat(this._genResult(res.data))
          this._checkMore(res.data)
        }
      })
    },

这里不知道为什么，折腾了很久才搞定，一直有bug。
checkMore判断标志位的状态：

_checkMore (data) {
      let song = data.song
      if (!song.list.length || (song.totalnum <= song.curnum + song.curpage * perpage)) {
        this.hasMore = false
      }
    }

可是到这里还有一点小问题，就是如果再改变query的时候，scroll的位置就不对了。多以，watchquery之后，要对scroll和page进行调整。

 _search () {
      this.page = 1
      this.$refs.suggest.scrollTo(0, 0)