自定義組件高度問題
下圖可以看出：在做一個展示聊天消息的組件時锁孟，由于“組件高度”依賴于聊天內(nèi)容，所以導(dǎo)致沒有顯式指定組件高度的情況下出現(xiàn)內(nèi)容層疊問題拉队。
自定義組件的高度問題
解決方案
在Component的ready中計算組件的實(shí)際高度然后通過setData()來設(shè)置即可。
wxml：
<view id='msg-content' class='msg-content msg-content-{{side}}'>
件生命周期函數(shù)，在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時執(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)容視圖的尺寸，并加上其他的固定部分的高度最終計算出組件的高度坦胶。
單位統(tǒng)一使用rpx透典。
結(jié)果如下所示：
自適應(yīng)高度
