二十一 首页，前端请求接口，将数据改活完整代码

<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:clentHeight+'px'}" -->
	<swiper @change="changeSwiper" :current="currentIndex" :style="{height:clentHeight+'px'}">
		<swiper-item v-for="(item,index) in newTopBar" :key="index">
			<scroll-view scroll-y="true" :style="{height:clentHeight+'px'}">
				<block v-if="item.data.length > 0">
					<block v-for="(i,n) in item.data" :key="n">
						<indexSwiper v-if="i.type === 'swiperList'" :indexSwiperList='i.swiperList'>
						</indexSwiper>
						<template v-if="i.type === 'recommendedList'">
							<recommended :recommendedList='i.recommendedList'>
							</recommended>
							<card name="展示"></card>
						</template>
						<commodity-list v-if="i.type === 'commodityList'" :commodityList='i.commodityList'>
						</commodity-list>
					</block>
				</block>
				<view class="" v-else>
					暂无数据。。。
				</view>
			</scroll-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: [],
                                newTopBar: []
                        }
                },
                onLoad() {
                        this.__init()
                },
                // 在这个生命周期中获取dom节点相关信息
                onReady() {
                        // 获取到dom节点
                        let view = uni.createSelectorQuery().select('.home-data');
                        // 获取节点对应的属性
                        view.boundingClientRect(data => {
                                // console.log(data)
                                this.clentHeight = 2500;
                                // this.clentHeight = data.height;
                        }).exec()
                },
                methods: {
                        __init() {
                                uni.request({
                                        url: 'http://192.168.31.62:3000/api/index_list/data',
                                        success: (res) => {
                                        let data = res.data.data;
                                        this.topBar = data.topBar;
                                        //this.newTopBar = data.data;
                                        this.newTopBar = this.initData(data);
                                        }
                                })
                        },
                        // 修改数据结构
                        initData(res) {
                                let arr = [];
                                for (let i = 0; i < this.topBar.length; i++) {
                                        let obj = {
                                                data: []
                                        }
                                        if (i == 0) {
                                                obj.data = res.data;
                                        }
                                        arr.push(obj)
                                }
                                return arr;
                        },

                        // 点击切换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>