微信小程序聊天信息显示最新一条信息

最新推荐文章于 2022-08-11 17:04:29 发布

原创最新推荐文章于 2022-08-11 17:04:29 发布 · 816 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了一种在微信小程序中实现消息列表自动滚动到底部的方法。通过使用wxml结合js, 利用createSelectorQuery选择器查询API获取元素的高度信息，并通过setData更新数据来实现视图的滚动。此方法适用于消息加载完毕后需要自动滚动到最新消息的情况。

wxml

data: {
    height1:'',
    scrollHeight: '100vh',
    scrollTop: 0, // 内容底部与顶部的距离
  },
// 消息滚动到最底部
  toViewBottom(){
    var query = wx.createSelectorQuery();
    var that = this;
    query.select("#scrollMsg").boundingClientRect(function(rect){
      that.setData({
        height1: rect.height + 'px',
      })
      wx.pageScrollTo({
        scrollTop: rect.height,
      });
    }).exec();
    
  },

toViewBottom()方法要在信息加载完之后的方法里调用，下图就是在图片上传成功之后执行