專案小需求之聊天氣泡可展開內容

  • 因為某些資訊內容太長或者某種原因必須分行輸出,這就導致了有時候一個氣泡佔據了一整個聊天區域
  • 所以我打算實現一個在該氣泡載入的時候判斷其氣泡長度,並在長度過長的情況下進行可展開的選擇功能
  • 下面是實現截圖



難點

  1. 動態獲取控制元件並獲得高度
  2. 動態定位可展開按鈕
  3. 每次獲取資訊的時候必須迴圈遍歷初始化

過程

  1. 先把迴圈展示的控制元件的key繫結為唯一值(很重要,後面功能實現不了浪費很多時間就是這個bug,搞得我心態爆炸
  2. 選擇在哪個事件進行迴圈遍歷,這裡我選擇在了時間資訊調整上(這個功能我以後可能會寫日記,這是實現效果
  3. 給控制元件繫結個唯一值之後,通過id獲取該控制元件,並且通過offsetHeight屬性獲取高度,判斷過於200px就進行可展開選擇
  4. 寫個可展開的標籤,並且通過上面控制元件得到的offsetWidth進行動態定位,並且賦予可展開該標籤的功能
  5. 進行使用者區分動態定位,這裡是less樣式

收穫

  • 一個key值沒繫結還得我一直扒原理一直除錯獲取訊息過程的程式碼,頭髮都要無了,這個小細節特別重要,別像我一樣給key值給個index,這點解決了就很好實現這個需求
  • 動態繫結的位置不是那麼完美,這是因為我的整體樣式沒設計好,一個用了浮動,一個沒用,所以我不好浮動定位,到時候有更好的再說吧