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