jasonDev
jasonDev
  • 发布:2021-05-18 21:55
  • 更新:2021-05-19 01:37
  • 阅读:2809

求问一个uniapp开发聊天框app,进入聊天框,不能滑动到最底部,怎办?

分类:uni-app

我和后台配合,用uniapp开发了一个聊天app,进入聊天页后,总是不能直接到最底部,怎么解决?按照这篇博客,解决了 消息实时显示在最底部的情况,可是文章最后有句话:“要是想要进入页面就滚到最底部呢 我们是在socket链接读取文件的时候调用了这个方法”,看不懂,到底什么时候调用这个方法呢?我在onLoad里调用这个方法,没效果啊。奇怪的是,我从别的地方移植过来的代码,原来的代码一进入聊天框,就可以滑动到最底部,可是我移植过来就不行。请高手指教,谢谢
我的代码:

<scroll-view id="scrollview" class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="50" :style="{height: style.contentViewHeight + 'px'}">

在onLoad里:

this.scrollToBottom();  
                 // 滚动到底部  
                 this.$nextTick(function() {  
                     console.log('进入页面滚动到底部')  
                     //进入页面滚动到底部  
                     //this.scrollTop = 9999;  
                     this.scrollTop = 9999999;  
                     this.$nextTick(function() {  
                         this.scrollAnimation = true;  
                     });                      
                 });  

/**  
          * @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)  
       })  
         }

--

2021-05-18 21:55 负责人:无 分享
已邀请:
暮雪骄阳

暮雪骄阳

数据是动态获取过来的,在你的onLoad之后完成,那就是你的置底事件已经执行完了,滚动条加载完成数据才发生高度变化。如果你的聊天界面,有用到下拉加载历史记录的话,置底事件,用在下拉加载完成的回调里,或者是在数据加载完成之后,这个时机一般受网络影响,通常一些下拉加载一般都是进入页面执行一次下拉加载,捕获这个时机就行了。
如果你用的scroll-view组件,你也可以加一些延迟,多次置底,100毫秒执行一次,300毫秒执行一次,500毫秒执行一次,要不就得能监听数据加载完成之后,抓不住这个时机,那就只能用多次执行的延迟去实现了,效果一般般。
我用的是一个上拉加载下拉刷新的组件,确实是放在下拉加载的回调里实现的。有时其实加载数据只是一瞬间的事,为了避免一个闪现的唐突,在list设置开关默认opacity:0,加载完成后opacity:1,加上渐变动画,基本上能跟微信QQ差不多效果,进来就看到完整的已经置底的聊天记录。可以尝试一下。

  • jasonDev (作者)

    谢谢回复,我目前的问题是:收到消息后,不能在最底部显示出来。非要退出页面,再进来,才可以显示。有时候能显示,有时候又显示不出来

    2021-05-29 22:54

  • 1***@qq.com

    回复 jasonDev: 看是不是进行了多次请求,然后后端返回的东西不一样导致的

    2022-05-10 15:46

该问题目前已经被锁定, 无法添加新回复