uni-app 聊天对话滚动到最底部

痛定思痛。 2021-11-08 16:28 1496阅读 0赞

**uni-app 之 聊天室滚到最底部**

**请注意 ！：  知识点为uni-app 与 vue 结合**

这次写到聊天室，碰到一个emmmmm问题比较严重的事情，聊天嘛，咱们想实现的就无非是微信，QQ那种聊天的效果嘛，我们研究了，，，，emmmm  （n久之长），终于是把这个功能写出来了，代码等什么时候整理出来给大家看，今天主要说一下碰到的一个问题，就是我发送消息的时候， 想要将消息弹出，发一条弹一条，代码附上

注意：scroll-view要设置高度

输入内容后，必然要在对话界面的底部显示内容，可以通过uni.pageScrollTo的方式，但是这个页面刷新的太厉害，输入框都刷新了，没法使用。所以只能使用scroll-view组件。但是通过scroll-view使用竖向滚动时，需要给 一个固定高度。为了适配屏幕的大小，则需要通过计算来确定scroll-view的高度。

<view class="content" id="content" :style="{height: style.contentViewHeight + 'px'}">
                <scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}" :scroll-with-animation="true" :scroll-top="scrollTop">
                    
                        <view class="small-talk_time">12:18</view>
                        
                        <view class="content-all">
                            
                            <view :class="item.type" v-for="(item, index) in chatRecord" :key="index" class="m-item">
                                
                                <view class="talk-text talk-left" v-if="item.type == 'talk-left'">
                                    
                                    <view class="talk-photo">
                                        <image src="../../static/images/myself.jpg" class="talk-img"></image>
                                    </view>
                                    
                                    <view class="talk-content">
                                        <view class="talk-huge"></view>
                                        <view class="talk-title">{
       {item.message}}</view>
                                    </view>
                                </view>
                                <view class="talk-text talk-right" v-if="item.type == 'talk-right'">
                                    
                                    <view class="talk-content">
                                        <view class="talk-title">{
       {item.message}}</view>
                                        <view class="talk-huge"></view>
                                    </view>
                                    
                                    <view class="talk-photo">
                                        <image src="../../static/images/myself.jpg" class="talk-img"></image>
                                    </view>
                                </view>
                            </view>
                        </view>
                    
                </scroll-view>
            </view>

既然是聊天 先将聊天页面写出来 写好了你说我说的样式  大概就是这个样子

![aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTY2NDk0NC8yMDE5MDcvMTY2NDk0NC0yMDE5MDcyOTE5MTU0NDA4Mi0xODgwNDY5MTYwLnBuZw][]

## js代码： ##

created () {
    　　　const res = uni.getSystemInfoSync();   //获取手机可使用窗口高度     api为获取系统信息同步接口
    　　　this.style.pageHeight = res.windowHeight;
    　　　this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) - 70; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
    　　　this.scrollToBottom();   //创建后调用回到底部方法
    　},　　　　　
    
    export default {
    　　data (){
    　　　　　// 聊天页面时时滚动样式
            style: {
                pageHeight: 0,
                contentViewHeight: 0,
                footViewHeight: 90,
                mitemHeight: 0
            },
    　　}
    }

/**
             * @author gongliying
             * @date 2019-07-26
             * @information 跳转页面底部
             */
            scrollToBottom: function () {
                let that = this;
                let query = uni.createSelectorQuery();
                query.selectAll('.m-item').boundingClientRect();
                query.select('#scrollview').boundingClientRect();
                query.exec((res) => {
                    that.style.mitemHeight = 0;
                    res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40)   //获取所有内部子元素的高度
                    if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) {   //判断子元素高度是否大于显示高度
                        that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight    //用子元素的高度减去显示的高度就获益获得序言滚动的高度
                    }
    　　　　　　　})
            }

这一步做的主要就是获取这个‘.m-item’这个里面的节点信息   uni-app虽然不支持window和document 但是咱们还是有一个api可以获取他元素的信息的 就算是uni.createSelectorQuery（）这个api，他会返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。这个exec（）他会执行这里面所有的请求，我们最后会获取到他的id dataset 左边界坐标  右边界坐标 上边界坐标 下边界左边 节点的宽度  节点的高度   具体的这个方法的使用可以去官网查看一番，我就不具体解释了  毕竟今天重点不是他呀    回到 原题   咱们说了   在最开始created的时候获取你当前使用手机的品牌啊  型号啊   我们这里主要的是获取可使用窗口的高度     然后我们又获取了所有子元素的告诉   然后就可以看着我的注释走了~~~~

但是呢。你们不要以为这样就好了  ， 还有一个很重要的事情，如果你们认真看了这段代码还有就是实验了一下， 你们会发现到最后那个滚动条没有滚动到最底部，会发现最后一调消息被隐藏了，也不是没有 ，页面上有这条消息，但是呢就是没有弹出来，后来呢，

仔细分析了一下，因为**由于vue采用虚拟dom，我每次生成新的消息时获取到的div的scrollHeight的值是生成新消息之前的值，所以造成每次都是最新的那条消息被隐藏掉了！**这就是开头我跟大家说注意这是uni-app和vue结合的原因了

解决方法：采用异步处理settimeout函数获取最新的scrollheight  让他先全部执行完了之后去走这个异步，这样就能确保滚动条每次滚到的都是最底部  上段代码更改如下：

/**
             * @author gongliying
             * @date 2019-07-26
             * @information 跳转页面底部
             */
            scrollToBottom: function () {
                let that = this;
                let query = uni.createSelectorQuery();
                query.selectAll('.m-item').boundingClientRect();
                query.select('#scrollview').boundingClientRect();
                query.exec((res) => {
                    that.style.mitemHeight = 0;
                    res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40)   //获取所有内部子元素的高度
    　　　　　　　　　　 // 因为vue的虚拟DOM 每次生成的新消息都是之前的，所以采用异步setTimeout    主要就是添加了这定时器
    　　　　　　　　　　 setTimeout(() => {
    
                    　　if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) {   //判断子元素高度是否大于显示高度
                        　　that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight    //用子元素的高度减去显示的高度就获益获得序言滚动的高度
                    　　}
    　　　　　　　　　}, 100)
    　　　　　　　})
            }

### 最后实现了每次聊天都是滚到最底部  要是想要进入页面就滚到最底部呢  我们是在socket链接读取文件的时候调用了这个方法 ###

此文章转载自[https://www.cnblogs.com/gongliying/p/11258189.html][https_www.cnblogs.com_gongliying_p_11258189.html]

[aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTY2NDk0NC8yMDE5MDcvMTY2NDk0NC0yMDE5MDcyOTE5MTU0NDA4Mi0xODgwNDY5MTYwLnBuZw]: /images/20211108/ca55052f3e3948cfa6bf8ed5ebac706d.png
[https_www.cnblogs.com_gongliying_p_11258189.html]: https://www.cnblogs.com/gongliying/p/11258189.html