UNIAPP实战项目笔记11 动态设置swiper内容的高度

UNIAPP实战项目笔记11动态设置swiper内容的高度

动态设置swiper的高度

使用onReady生命周期

onReady 是在初步完成渲染后才会执行,只有渲染完成后才能获取组件高度
通过获取生成的内容高度,自动设置swiper高度

onReady() { // 初步渲染完后执行
            let view = uni.createSelectorQuery().select(".home-data"); // 获取dom节点对象
            // 获取节点对象数据
            view.boundingClientRect(data=>{
                // 动态获取内容块的高度,动态渲染swiper高度
                // 不要去试图计算可视区域的高度,在ios下有bug
                this.clentHeight = data.height;
            }).exec();
        },

<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px'">
                <swiper-item
                    v-for="(item,index) in topBar"
                    :key="index"
                >
                    <view class="home-data">
                        <IndexSwiper></IndexSwiper>
                        <Recommend></Recommend>
                        <Card cardTitle='猜你喜欢'></Card>
                        <CommodityList></CommodityList>   
                    </view>
                    
                </swiper-item>
            </swiper>