swiper高度自适应子元素的高度

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35713752/article/details/83346436

示例图：上面的三个tab是swiper,然后红框内的高度不固定的情况下，让swiper高度自适应循环渲染出来的高度加上面的高度。

解决代码：

xwml

<swiper current="{{current}}" bindchange="change" duration="300" style="height:{{swiper_height + 80}}px;">
    <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>

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高度自适应
    })
}