小程序下拉加载聊天分页功能
项目场景:进入群聊聊天室后,下拉加载更多历史记录,页面会跳到最底部一条数据
加载更多的时候会跳到最底部
不能正常观看聊天记录
screenTopClick: function () {
console.log('顶部')
if (this.data.noHistory) {
let pageNo = this.data.pageNo + 1;
this.setData({
pageNo: pageNo
})
this.getClinicHistoryList()
}
},
解决方案:
在页面的时候可以使用
<view wx:if='{{item.fromSource!=3}}' id='msg-{{index}}' style='display: flex; padding: 2vw 11vw 2vw 2vw;'>
用id是一个变量来控制 根据toview来显示哪个id
例如:请求到数据后进行加减
if (this.data.pageNo == 1) {
//第一次进入显示最后一条数据
msgList = res.data.rows;
this.setData({
msgList,
toView: 'msg-' + (msgList.length - 1)
});
} else {
//加载更多时候保证维持在上一页的第一条
let brr = res.data.rows;
let arr = msgList;
msgList = brr.concat(arr);
let num=msgList.length-arr.length;
console.log(num)
this.setData({
msgList,
toView: 'msg-' + num,
})
}
版权声明:本文为darui_lili原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。