小程序 scroll-view下拉加载跳到底部优化

小程序下拉加载聊天分页功能

项目场景:进入群聊聊天室后,下拉加载更多历史记录,页面会跳到最底部一条数据


加载更多的时候会跳到最底部

不能正常观看聊天记录

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版权协议,转载请附上原文出处链接和本声明。