小程序自定義組件如何自適應(yīng)高度

自定義組件高度問題

下圖可以看出：在做一個(gè)展示聊天消息的組件時(shí)，由于“組件高度”依賴于聊天內(nèi)容，所以導(dǎo)致沒有顯式指定組件高度的情況下出現(xiàn)內(nèi)容層疊問題。


自定義組件的高度問題

解決方案

在Component的ready中計(jì)算組件的實(shí)際高度然后通過setData()來設(shè)置即可。
wxml：

<view id='msg-content' class='msg-content msg-content-{{side}}'>
            件生命周期函數(shù)，在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
    <view class='msg-content-arrow msg-content-arrow-{{side}}'/>
</view>

js:

lifetimes: {
      ready: function () { 
          var self = this;
          var si = app.globalData.gSystemInfo;
          let node = self.createSelectorQuery().select('#msg-content');
          node.boundingClientRect(
              function(rect) {
                  self.setData({
                      wrapperHeight: rect.height * si.pixelRatio + 70
                  })
              }
          ).exec();
      }
  },

解釋：
通過“#msg-content”獲取內(nèi)容視圖的node，并通過node.boundingClientRect()來獲取內(nèi)容視圖的尺寸，并加上其他的固定部分的高度最終計(jì)算出組件的高度。
單位統(tǒng)一使用rpx。

結(jié)果如下所示：


自適應(yīng)高度
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容