微信小程序：swiper高度动态适配

ps：没有在swiper中添加scroll-view是为了可使用页面的下拉刷新，最终方法直接跳到方案四。（含代码片断）

初始方案

swiper高度固定，swiper-item默认绝对定位且宽高100%，每一个swiper-item中内容由固定高度的child组成，而后根据child数量动态计算swiper高度，初始方案（因为rpx针对屏幕宽度进行自适应，child_height使用rpx方便child正方形状况下自适应）：

swiper_height = child_height * child_num

屏幕效果仅在宽度375的设备（ip六、ipⅩ）完美契合，其余设备都底部会出现多余空隙，而且在上拉加载过程当中，随着内容增长，底部空隙也逐渐变大。

方案二

开始觉得是rpx适配显示问题，后经过文档中描述的WXSS 尺寸单位转化rpx为px（child_height使用rpx）：

swiper_height = child_height * child_num * ( window_width / 750 )

而后并没有变化，咱们能够看到child_height在不一样宽度屏幕下，显示的宽高尺寸是不同的（px单位），那就尝试使用box在各个屏幕的实际高度进行计算swiper高度，box的高度能够单独在页面中增长一个固定标签，该标签样式和box宽高保持一致而且隐藏起来，而后在page的onload中经过wx.createSelectorQuery()获取标签实际高度baseItemHeight（px单位）：

swiper_height = baseItemHeight * child_num

结果显示本来的ip六、ipⅩ没有问题，另外宽带小于375的ip5上也ok，可是在大于375的设备上仍是出现空隙，好比ip的plus系列。

方案三

以前的方案都没法计算出合适的swiper高度，那就换个思路，好比去计算空隙的高度。

swiper底部有一个load标签显示“加载更多”，该标签紧贴box其后，经过wx.createSelectorQuery()来获取bottom，然而你会发现bottom是标签的height加top的和。计算底部空隙（暂时忽略“加载更多”标签高度）：

space_height = swiper_height - load_top

刚计算完能够看到在静止状态下，计算出space_height拿去修改swiper_height显示空隙恰好被清掉了，可是接着就发如今动过程当中获取到的bottom是不固定的，也就是说数值可能不许确致使space_height计算错误，显示效果达不到要求。

方案四

基于上述方案，swiper底部的load标签绝对定位bottom:0，同时在swiper底部添加一个高度为0而且尾随内容box其后的标签（mark），而后获取这两个标签的top值之差：

space_height = load_top - mark_top

代码片断 wechatide://minicode/adphcCm765Z8

此次获取到的空隙高度用于再计算swiper高度完美契合，美滋滋！！！