十七 解决swiper默认有一个高度，获取可视区域高度有bug（在ios中），所以通过获取组件的高度解决，注意获取dom节点对应的生命周期和方式，很诡异

最新方法：juejin.cn/post/704530…

以下是旧方法，随着后面项目的进行，发现用不了。只能用新方法处理 解决： swiper默认有一个高度，导致首页页面组件渲染展示不完整的问题，通过获取需要展示组件的高度来解决。

解决主要步骤：

index.vue 完整代码

<template>
        <view class="index">
                <!-- 顶部导航栏部分 -->
                <!-- #ifdef MP-WEIXIN -->
                <view class="wx-nav">
                        <view class="iconfont icon-fangdajing">
                        </view>
                        <text>百年奥莱</text>
                        <view class="iconfont icon-xiaoxi">
                        </view>
                </view>
                <!-- #endif -->
                <!-- topBar -->
                <scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollTop">
                        <view :id="'top'+index" class="scroll-item" v-for="(item,index) in topBar" :key="index" @tap="changeTap(index)">
                                <text :class="currentIndex === index ? 'f-active-color':'f-color'">{{item.name}}</text>
                        </view>
                </scroll-view>
                <!-- swriper :style="{height:}" -->
                <swiper @change="changeSwiper" :current="currentIndex" :style="{height:clentHeight+'px'}">
                        <swiper-item  v-for="(item,index) in topBar" :key="index">
                                <view class="home-data">
                                        <indexSwiper></indexSwiper>
                                        <recommended></recommended>
                                        <card name="展示"></card>
                                        <commodity-list></commodity-list>
                                </view>
                        </swiper-item>
                </swiper>
                <!-- 首页内容 -->
                <!-- swiper部分 -->
                <!-- <indexSwiper></indexSwiper>
                <recommended></recommended>
                <card name="展示"></card>
                <commodity-list></commodity-list> -->

                <!-- 其他模块：户外运动 -->
                <!-- <banner></banner>
                <card name="热销商品"></card>
                <hot></hot>
                <card name="推荐店铺"></card>
                <shop></shop>
                <card name="为您推荐"></card>
                <commodity-list></commodity-list> -->
        </view>
</template>

<script>
        import indexSwiper from '@/components/index/indexSwiper.vue'
        import recommended from '@/components/index/recommended.vue'
        import card from '@/components/common/card.vue'
        import commodityList from '@/components/common/commodityList.vue'
        import banner from '@/components/index/banner.vue'
        import hot from '@/components/index/hot.vue'
        import shop from '@/components/index/shop.vue'
        export default {
                components:{
                        indexSwiper,
                        recommended,
                        card,
                        commodityList,
                        banner,
                        hot,
                        shop
                },
                data() {
                        return {
                                currentIndex:0, // 选中的索引
                                scrollTop:'top0', // scroll的tab标签跟随swiper滚动而滚动索引的id值
                                clentHeight:0, // 组件的高度
                                topBar:[
                                {name:'推荐'},
                                {name:'户外运动'},
                                {name:'服饰内衣'},
                                {name:'鞋子箱包'},
                                {name:'美妆护肤'},
                                {name:'家具数码'},
                                {name:'食品母婴'},
                                ]
                        }
                },
                onLoad() {

                },
                // 在这个生命周期中获取dom节点相关信息
                onReady(){
                        // 获取到dom节点
                        let view = uni.createSelectorQuery().select('.home-data');
                        // 获取节点对应的属性
                        view.boundingClientRect(data => {
                                // console.log(data)
                                this.clentHeight = data.height;
                        }).exec()
                },
                methods: {
                        // 点击切换topBar,添加对应的样式
                        changeTap(index){
                                if(this.currentIndex === index) return
                                this.currentIndex = index;
                                this.scrollTop = 'top' + index;
                        },
                        // 滑动swiper,切换对应的topBar
                        changeSwiper(e){
                                this.changeTap(e.detail.current)

                                console.log(e.detail.current)
                        }
                }
        }
</script>

<style scoped>
.wx-nav{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 200rpx;
        line-height: 200rpx;
        font-size: 30rpx;
}
.wx-nav .iconfont{
        font-size: 20px;
        margin: 0 20rpx;
}

.scroll-content{
        width: 100%;
        height: 50rpx;
        white-space: nowrap;

}
.scroll-item{
        margin: 0 20rpx;
        display: inline-block;

}
.f-active-color{
        border-bottom: 6rpx solid #49BDFB;
}

</style>