十五 首页-顶栏滑块功能开发：如何切换样式，如何切换swiper

关键部分：如何切换样式，如何切换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">
                    <view 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 -->
            <swiper @change="changeSwiper" :current="currentIndex">
                    <swiper-item  v-for="(item,index) in topBar" :key="index">
                            <view class="swiper-item">{{item.name}}</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,
                                topBar:[{
                                        name:'推荐',
                                },{name:'户外运动'},{name:'服饰内衣'},{name:'鞋子箱包'},{name:'美妆护肤'},{name:'家具数码'},{name:'食品母婴'}]
                        }
                },
                onLoad() {

                },
                methods: {
                        // 点击切换topBar,添加对应的样式
                        changeTap(index){
                                if(this.currentIndex === index) return
                                this.currentIndex = index
                        },
                        // 点击切换topBar,切换对应的swiper
                        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>