项目场景:
最近学习小程序遇到了一个场景,需要实现页面自动滚动到最新回复的内容,看了微信开发文档,发现有个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 来滚动到这个位置。