自定义组件高度问题
下图可以看出：在做一个展示聊天消息的组件时，由于“组件高度”依赖于聊天内容，所以导致没有显式指定组件高度的情况下出现内容层叠问题。
自定义组件的高度问题
解决方案
在Component的ready中计算组件的实际高度然后通过setData()来设置即可。
wxml：
<view id='msg-content' class='msg-content msg-content-{{side}}'>
件生命周期函数，在组件实例进入页面节点树时执行
<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”获取内容视图的node，并通过node.boundingClientRect()来获取内容视图的尺寸，并加上其他的固定部分的高度最终计算出组件的高度。
单位统一使用rpx。
结果如下所示：
自适应高度
