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="chat-window"> -->
<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>
<!-- </view> -->
</scroll-view>
</view>
既然是聊天 先將聊天頁面寫出來 寫好了你說我說的樣式 大概就是這個樣子
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鏈接讀取文件的時候調用了這個方法