微信小程序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-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高度自适应
    })
}