微信小程序swiper高度自适应，swiper的子元素高度不固定小程序 swiper 组件默认高度150px，并且如果子元素过高，swiper不会自适应高度 解决方案一： （总体来说不够完美，适合满屏滑动）如果不是满屏的状态，用scroll-view  IOS滑动兼容性不好，在IOS会有无法滑动的情况 <swiper class="content" style="height:{{height}}px" bindchange="change" current-item-id="{{docid}}" duration="100" >    <swiper-item data-key="{{item.id}}"  wx:for="{{title}}"  wx:key="index"   item-id="{{item.id}}" >    <scroll-view    data-id="{{item.id}}"    style='height:100%;'    scroll-y    bindscrolltolower="scrolltolower"    data-left="51"    scroll-top="{{top}}"    bindscroll="scroll"    >      <!--单条新闻start  -->      <navigator url="/pages/detail/detail?id={{item.docid}}" class="item" wx:for="{{item.id==docid?news:''}}" wx:key="index">              </navigator>      <!--单条新闻end  -->       <view class='loading'>加载中...</view>    </scroll-view>  </swiper-item> </swiper>适应场景： [图片] 适合这种满屏滑动的，嵌套 scroll-view 注意： <scroll-view> 需要有条件，写固定的高，纵向滑动scroll-y   横向滑动 scroll-x white-space:nowrap; 解决方案二： （适应子元素高度也不一致） 效果图是这样的：然后在上滑过程中，导航栏还需要吸顶，然后滑动下方tab栏的内容 [图片][图片] 其实如果不是基于小程序，我们可以很直接用swiper插件，操作起来简直方便，小程序由于 swiper 高的限制，真是走了不少弯路，如果下面的列表高度一样，我们便可以算出一个的高度，然后乘以个数即可，但是这样只能求出每一个个数 index .wxml <swiper current="{{current}}" bindchange="change" duration="300" style="height:{{swiper_height + 80}}px;min-height:50%vh;">    <swiper-item class="swiper-item" wx:for="{{channel_list}}" wx:key="{{item.id}}">        <!-- navigator 的类名很重要，虽然一个循环用统一样式，但是我们基于不同的tab 取了不用的类名  ，因为小程序无法操作DOM元素，虽然封装的API 可以获取，但是只能获取第一个和所有，我们每个tab的内容个数不一样，所以需要基于每个tab栏求，item.channelId  是图2标注吸顶效果的channelId, -->        <navigator class="column-list column-list{{item.channelId}}" url="" wx:for="{{item.viewLessonList}}" wx:for-item="lesson" wx:key="{{index}}" wx:key-item="lesson-item">            这里面便是一个一个不同高度的列表        </navigator>        <!-- 这下面就是weui的一个加载样式，基于分页加载做的不同样式 -->        <view class="weui-loadmore" hidden="{{is_loadmore}}">            <view class="weui-loading"></view>            <view class="weui-loadmore__tips">正在加载</view>        </view>        <view class="weui-loadmore weui-loadmore_line" hidden="{{!is_loadmore}}">            <text class="weui-loadmore__tips">左右滑动，查看更多</text>        </view>    </swiper-item> </swiper> [图片] index.js // 获取wxml的节点信息 function get_wxml(className, callback) {    wx.createSelectorQuery().selectAll(className).boundingClientRect(callback).exec() } onReady: function() {    let column_all = that.data.column_list[that.data.current].viewLessonList, // 这个是基于java端返回的tab栏的接口，大致样式如上图，也就是每个列表，        channel_id = that.data.column_list[that.data.current].channelId // 我们这个就是求出目前的channelId，好区分不同的类名    that.setData({        swiper_length: column_all.length // 算出当前tab栏有多少个列表    })    get_wxml(`.column-list${channel_id}`, (rects) => {        let sum_heigth = 0            for (let i = 0; i < that.data.swiper_length; i++) {            sum_heigth += rects[i].height        }        that.setData({            swiper_height: sum_heigth        })        // 就是循环相加每个列表的高度，然后赋值给swiper_height,便可以求出当前tab栏的高度，赋值给swiper 便可以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的设备（ip6、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[代码]结果显示原本的ip6、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[代码][图片] 代码片段 这次获取到的空隙高度用于再计算[代码]swiper[代码]高度完美契合，美滋滋！！！