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

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

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

wxml：

js:

解释：

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

单位统一使用rpx。

结果如下所示：

就是小程序上方由胶囊占据的bar，就叫titleBar。

因为我们可以在胶囊左侧写标题和其他一些东西。这些东西要跟胶囊中线对齐。

首先我没段们要撑起statusBar的高度，也就是最顶部的那个bar。这个bar的高度很容易取得。

uni.getMenuButtonBoundingClientRect().top取得的是胶囊距离视口顶部的距离，减掉statusBar的高度，就是胶囊离statusBar下沿的距离。这个距离乘以2，加上胶囊自身高度，就是titleBar的蠢明高度。

见红色部分。

开发者工具中会有略微错位，无妨，以真机为准。

我们希望胶囊左侧空白区域与胶囊有间距，而且间距最好是等于胶囊到枯档誉右边边线的距离。这个前提下，左侧空白区域的宽度怎么算？

写成组件就是这样：

用法：

演示如何使用作用域插槽：

---