使用scroll-top使聊天對話滾動到底部

scroll-view需要設置高度

輸入內容后，必然要在對話界面的底部顯示內容，但是在uni-app下不知道如何能操作DOM來顯示和定位，有說需要通過uni.pageScrollTo的方式，但是這個頁面刷新的太厲害，輸入框都刷新了，沒法使用。所以只能使用scroll-view組件。但是通過scroll-view使用豎向滾動時，需要給 <scroll-view> 一個固定高度。為了適配屏幕的大小，則需要通過計算來確定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 {// 聊天頁面時時滾動樣式style: {pageHeight: 0,contentViewHeight: 0,footViewHeight: 90,mitemHeight: 0,},scrollTop : 0} }, created() {const res = uni.getSystemInfoSync(); //獲取手機可使用窗口高度? ? ?api為獲取系統信息同步接口this.style.pageHeight = res.windowHeight;this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (300); //像素? ?因為給出的是像素高度 然后我們用的是upx? 所以換算一下?}, onLoad() {this.scrollToBottom(); //創建后調用回到底部方法 }

發送消息時調用

/** * @information 跳轉頁面底部 */ 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) //獲取所有內部子元素的高度// 因為vue的虛擬DOM 每次生成的新消息都是之前的，所以采用異步setTimeout? ? 主要就是添加了這定時器setTimeout(() => {if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判斷子元素高度是否大于顯示高度that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度減去顯示的高度就獲益獲得序言滾動的高度}}, 100)}) },

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。