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

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

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

wxml：

js:

解释：

通过“#msg-content”获取内容视图的node，并通过node.boundingClientRect()来获取内誉冲顷容视图的尺寸，并加判顷上其他的固定部分的高度最终计算出组件的高度。

单位统一使用rpx。

结果如下所示：

在小程序中使用并运行components遇到了两个问题：

问题描述：

Cannot read property ‘init’ of null ，为null

出现原因：

出现的原因是，我在wxml里有if判断，而此时num还没有等于1，所以造成null

解决办法：

可以在num为1，也就是if条件成立时，进行selectComponent

补充：

还有绝哗可能出现为null的情况有以下几点：

1、json里usingComponents名与wxml组件名不一致：

2、通过id设置时，id名不一致,或者不是用‘#’

3、通过id设置时，id名不一致,或者不是用‘.’

4、就是上面出现过的，存在if条件悄带判断的，满足条件后再selectComponent

---