1.配置到底部监听
在app.json的window里面加入
里面的300表示距离底部300rpx触发onReachBottom事件 默认50rpx
"window": {
"onReachBottomDistance": 300
},
2.在数据列表的js页面
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("到底部了");
// 把字符串转为数字进行加减
let page = parseInt(this.data.page)
// 当前数据到底部就把page+1传入获取第二页数据合并
page = parseInt(page + 1)
console.log(page);
this.setData({
page:page
})
this.getClue(page)
},
// 请求数据方法
getClue(page) {
getClueApi({
page
}).then((res) => {
// 请求返回的数据
console.log(res.data);
// 把请求到的数据与前一次的数据合并,第一次的时候定义的列表要为空[]
let list = []
// 判断当前是否为第一页,在还有其他筛选条件的情况下,其他筛选条件更新时,传入的this.data.page为1 就会覆盖整个list数据
if (page != 1) {
list = [...this.data.list, ...res.data.list.data]
} else {
// 传入1就初始化为1
this.setData({
page:page
})
// 滚动到顶部
wx.pageScrollTo({
scrollTop: 0
})
list = res.data.list.data
}
this.setData({
list: list,
cluestatus: res.data.status,
})
})
},
// 其他筛选触发的事件
input() {
if (this.data.seek != "") {
// 这里传入的page为1 所以会重新覆盖list数据
this.getClue(1, this.data.seek)
} else {
Toast({
position: "top",
message: '请输入搜索词!'
});
}
},