uni-app 聊天界面滚动到消息底部

目次

题目
组件
页面
利用的API
总结

---

题目

当你发一个消息，但是消息却需要你自己向下滑你才能瞥见，否则一直呗输入框挡住。

组件

scroll-view组件：一般利用scroll-view组件的都接纳利用其scroll-into-view或者scroll-to属性。
scroll-top属性需要计算父容器和子容器的高度差，scroll-into-view我只能说非常难用，特殊是ID这个限定，我在v-for中为每个聊天信息设置id，利用index最大的拼接出最底层消息的id，效果没有效果...

页面

1. <scroll-view scroll-y="true"  
2.                 :scroll-top="scrollTop" id="scroll" class="scroll" @tap="Extend =false ">
3.                         <view class="content" id="chatList">
4.                                 <view class="Chat">
5.                                         <view v-for="(item, index) in historyChat" :key="index">
6.                                           <chat :img_path="item.imgPath" :meg="item.message" :is_robot="item.robot" class="chats"></chat>
7.                                         </view>
8.                                 </view>
9.                         </view>
10.                 </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信息

1. // 滚动至聊天底部
2.     scrollToBottom: function(){
3.                 const query = uni.createSelectorQuery();
4.                 query.select('#scroll').boundingClientRect((rect) => {
5.                   if (rect) {
6.                         uni.pageScrollTo({
7.                           scrollTop: rect.height,
8.                           duration: 300 // 滚动动画持续时间，单位 ms
9.                         });
10.                   }
11.                 });
12.                 query.exec();
13.                 },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。