本篇内容
* 上拉加载(数据分页)
* 下拉刷新
上拉加载
思路:后端分页,前端记录页数。当下拉触底时请求新的一页数据,当新的一页返回数据为空时,底部提醒“已全部加载完毕”,否则提示“上拉加载数据”
用到了页面的事件处理函数 onReachBottom()
监听用户上拉触底事件。
//触发触底事件
onReachBottom () {
this.loadMore()
},
//加载更多
loadMore () {
if (!this.data.hasMore) return
wx.showLoading({ title: '拼命加载中...' })
this.setData({ subtitle: '加载中...' })
return getListApi(this.data.type, this.data.page++, this.data.size)
.then(d => {
if (d.subjects.length) {
this.setData({ subtitle: d.title, movies: this.data.movies.concat(d.subjects) })
} else {
this.setData({ subtitle: d.title, hasMore: false })
}
wx.hideLoading()
})
.catch(e => {
this.setData({ subtitle: '获取数据异常' })
console.error(e)
wx.hideLoading()
})
},