小程序中实现页面自动滚动到最新回复的内容

项目场景：

最近学习小程序遇到了一个场景，需要实现页面自动滚动到最新回复的内容，看了微信开发文档，发现有个scroll-view属性，可以实现
但是由于习惯dom操作，想尝试使用类似dom操作的方法来实现

---

解决方法

在微信小程序中，你可以使用 wx.createSelectorQuery 方法来获取元素的信息，然后使用 wx.pageScrollTo 方法来滚动页面。
首先，你需要给每个消息元素一个唯一的 id，你可以使用数组的索引作为 id。修改你的 WXML 文件如下：

<view wx:for="{{messages}}" wx:key="*this" id="message-{{index}}">
  <view class="bubble bubble-left" wx:if="{{item.type === 'response'}}">{{item.text}}</view>
  <view class="bubble bubble-right" wx:if="{{item.type === 'request'}}">{{item.text}}</view>
</view

js代码

wx.request({
  // 其他的代码...
  success: (res) => {
    var newMessages = this.data.messages;
    newMessages.push({text: res.data.data.result, type: 'response'});
    this.setData({
      messages: newMessages
    }, () => {
      // 在 setData 的回调函数中滚动到最新的消息
      var query = wx.createSelectorQuery();
      query.select('#message-' + (newMessages.length - 1)).boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec((res) => {
        wx.pageScrollTo({
          scrollTop: res[0].bottom + res[1].scrollTop,
          duration: 300
        });
      });
    });
  }
});

在这个修改后的代码中，每次添加新的消息后，我们都会滚动到最新的消息。我们使用 wx.createSelectorQuery 来获取最新消息元素的位置，然后使用 wx.pageScrollTo 来滚动到这个位置。

---