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

首先呢:在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)

猜你喜欢

转载自blog.csdn.net/weixin_40814356/article/details/80478440