項目小需求之聊天氣泡可展開內容
- 因為某些信息內容太長或者某種原因必須分行輸出,這就導致了有時候一個氣泡占據了一整個聊天區域
- 所以我打算實現一個在該氣泡加載的時候判斷其氣泡長度,並在長度過長的情況下進行可展開的選擇功能
- 下面是實現截圖
難點
- 動態獲取控件並獲得高度
- 動態定位可展開按鈕
- 每次獲取信息的時候必須循環遍歷初始化
過程
- 先把循環展示的控件的key綁定為唯一值(很重要,后面功能實現不了浪費很多時間就是這個bug,搞得我心態爆炸
- 選擇在哪個事件進行循環遍歷,這里我選擇在了時間信息調整上(這個功能我以后可能會寫日記,這是實現效果
- 給控件綁定個唯一值之后,通過id獲取該控件,並且通過offsetHeight屬性獲取高度,判斷過於200px就進行可展開選擇
- 寫個可展開的標簽,並且通過上面控件得到的offsetWidth進行動態定位,並且賦予可展開該標簽的功能
- 進行用戶區分動態定位,這里是less樣式
收獲
- 一個key值沒綁定還得我一直扒原理一直調試獲取消息過程的代碼,頭發都要無了,這個小細節特別重要,別像我一樣給key值給個index,這點解決了就很好實現這個需求
- 動態綁定的位置不是那么完美,這是因為我的整體樣式沒設計好,一個用了浮動,一個沒用,所以我不好浮動定位,到時候有更好的再說吧