uni-app 聊天界面滚动到消息底部
目录
问题
组件
页面
使用的API
总结
问题
当你发一个消息，但是消息却需要你自己向下滑你才能看见，否则一直呗输入框挡住。
组件
scroll-view组件：一般使用scroll-view组件的都采取使用其scroll-into-view或者scroll-to属性。
scroll-top属性需要计算父容器和子容器的高度差，scroll-into-view我只能说非常难用，特别是ID这个限制，我在v-for中为每个聊天信息设置id，使用index最大的拼接出最底层消息的id，结果没有效果...
页面
<scroll-view scroll-y="true" :scroll-top="scrollTop" id="scroll" class="scroll" @tap="Extend =false "> <view class="content" id="chatList"><view class="Chat"><view v-for="(item, index) in historyChat" :key="index"><chat :img_path="item.imgPath" :meg="item.message" :is_robot="item.robot" class="chats"></chat></view></view></view></scroll-view>chat是我自己封装的组件，没公布，写法可以参考我之前的文章http://t.csdnimg.cn/Di6Xo
使用的API
- 主角：uni.pageScrollTo
这个API的描述是可以将页面滚动到目标位置（单位px）。可以指定滚动到具体的scrollTop数值，也可以指定滚动到某个元素的位置。
注意：这个滚动的位置是从页面的顶部开始计算的
- 配角：uni.createSelectorQuery()：
这个方法返回一个SelectorQuery对象实例，其通过绑定id，返回一个 NodesRef 对象实例，可以用于获取节点信息。
| id | String | 节点的 ID |
| dataset | Object | 节点的 dataset |
| left | Number | 节点的左边界坐标 |
| right | Number | 节点的右边界坐标 |
| top | Number | 节点的上边界坐标 |
| bottom | Number | 节点的下边界坐标 |
| width | Number | 节点的宽度 |
| height | Number | 节点的高度 |
而 NodesRef 对象带有boundingClientRect方法可以获取某个节点信息。
总结
那么思路已经很清晰了，使用uni.pageScrollTo 让滚动到目标位置（scrollTop）设置为页面的高度不就可以了？
uni.createSelectorQuery()锁定scroll-view的id，使用 NodesRef 对象返回的只有height信息
// 滚动至聊天底部scrollToBottom: function(){const query = uni.createSelectorQuery();query.select('#scroll').boundingClientRect((rect) => {if (rect) {uni.pageScrollTo({scrollTop: rect.height,duration: 300 // 滚动动画持续时间，单位 ms});}});query.exec();},