小程序自定义组件如何自适应高度

自定义组件高度问题

下图可以看出：在做一个展示聊天消息的组件时，由于“组件高度”依赖于聊天内容，所以导致没有显式指定组件高度的情况下出现内容层叠问题。

自定义组件的高度问题

解决方案

在Component的ready中计算组件的实际高度然后通过setData()来设置即可。
wxml：

            件生命周期函数，在组件实例进入页面节点树时执行
    

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。

结果如下所示：

自适应高度