【小程序】动态计算设置swiper高度

需求：

        一个滑动的swiper视图，每个swiper-item的高度不同，需要swiper展示所有内容。

 

遇到的问题：

        小程序中swiper必须设置一个固定高度，但是遇到每一个swiper-item高度不同的情况，只能在swiper层设置一个最大的高度去装载，会出现个别底部留空的情况。

 

解决方案：

        使用query.selectAll计算出每一个swiper-item的高度保存到一个数组，根据swiper的下标去复制swiper高度。此处需要在dom渲染完再去使用selectAll方法

 

实例代码：

<swiper
    class="swiper" 
    :current="current"
    :style="'height:'+swiperHeight[current]+'px'">
    <swiper-item v-for="(item, index) in List" :key="index" class="swiperItem">    		            
        ......
    </swiper-item>
</swiper>

        

data(){
    return{
        current: 0,
        swiperHeight: [],
    }
}

this.$nextTick(function(){
    var query = wx.createSelectorQuery()
    query.selectAll('.swiperItem').boundingClientRect(function (rect) {
        rect.forEach((item,index) => {
            that.swiperHeight.push( item.height + 20 )
        })
    }).exec()
})