使用scroll-top使聊天對(duì)話滾動(dòng)到底部

scroll-view需要設(shè)置高度

輸入內(nèi)容后，必然要在對(duì)話界面的底部顯示內(nèi)容，但是在uni-app下不知道如何能操作DOM來(lái)顯示和定位，有說(shuō)需要通過(guò)uni.pageScrollTo的方式，但是這個(gè)頁(yè)面刷新的太厲害，輸入框都刷新了，沒(méi)法使用。所以只能使用scroll-view組件。但是通過(guò)scroll-view使用豎向滾動(dòng)時(shí)，需要給 <scroll-view> 一個(gè)固定高度。為了適配屏幕的大小，則需要通過(guò)計(jì)算來(lái)確定scroll-view的高度。

<scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}" :scroll-with-animation="true" :scroll-top="scrollTop"><block v-for="chat in chatList"><online-chat-control :chatItem="chat"></online-chat-control></block></scroll-view>

js代碼

data() {return {// 聊天頁(yè)面時(shí)時(shí)滾動(dòng)樣式style: {pageHeight: 0,contentViewHeight: 0,footViewHeight: 90,mitemHeight: 0,},scrollTop : 0} }, created() {const res = uni.getSystemInfoSync(); //獲取手機(jī)可使用窗口高度? ? ?api為獲取系統(tǒng)信息同步接口this.style.pageHeight = res.windowHeight;this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (300); //像素? ?因?yàn)榻o出的是像素高度 然后我們用的是upx? 所以換算一下?}, onLoad() {this.scrollToBottom(); //創(chuàng)建后調(diào)用回到底部方法 }

發(fā)送消息時(shí)調(diào)用

/** * @information 跳轉(zhuǎn)頁(yè)面底部 */ scrollToBottom() {let that = this;let query = uni.createSelectorQuery();query.selectAll('.cu-chat').boundingClientRect();query.select('#scrollview').boundingClientRect();query.exec((res) => {hat.style.mitemHeight = 0;res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //獲取所有內(nèi)部子元素的高度// 因?yàn)関ue的虛擬DOM 每次生成的新消息都是之前的，所以采用異步setTimeout? ? 主要就是添加了這定時(shí)器setTimeout(() => {if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判斷子元素高度是否大于顯示高度that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度減去顯示的高度就獲益獲得序言滾動(dòng)的高度}}, 100)}) },

?

總結(jié)

以上是生活随笔為你收集整理的uniapp聊天对话滚动到底部的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。