uniapp将聊天页面定位始终定位到最底部展示

在制作IM即时通讯的时候,常常因为发出的消息不能定位到最底部,对于新手来说比较烦恼,复制下面这段代码就能实现聊天始终定位在最底部

 this.$nextTick(() => {
  
                 // document.getElementById("scrolldIV2").scrollIntoView();     //h5端定位到指定位置    
                 setTimeout(() => {
                     uni.createSelectorQuery().select(".cu-chat").boundingClientRect(function(res) { //定位到你要的class的位置
                         console.log("标签获取====>", res)
                         uni.pageScrollTo({
                             scrollTop: res.height,
                             duration: 0
                         });
                     }).exec()
  
                 }, 50)
  
                 //this.viewIndex = "im_" + this.ChatList.length;
  
             })
版权声明 ▶ 本网站名称:我的学习笔记
▶ 本文链接:https://ooolo.net/article/507.html
▶ 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行核实删除。
▶ 转载本站文章需要遵守:商业转载请联系站长,非商业转载请注明出处!!!

none
最后修改于:2024年05月29日 13:28

添加新评论

icon_mrgreen.pngicon_neutral.pngicon_twisted.pngicon_arrow.pngicon_eek.pngicon_smile.pngicon_confused.pngicon_cool.pngicon_evil.pngicon_biggrin.pngicon_idea.pngicon_redface.pngicon_razz.pngicon_rolleyes.pngicon_wink.pngicon_cry.pngicon_surprised.pngicon_lol.pngicon_mad.pngicon_sad.pngicon_exclaim.pngicon_question.png