完整代码：
<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>
<!--运动户外和 其他模块 -->
<banner v-if="i.type=== 'banner'" :bannerList='i.imgUrl'></banner>
<template v-if="i.type === 'icons'">
<icons :iconList='i.iconsList'></icons>
<card name="热销商品"></card>
</template>
<template v-if="i.type === 'hot'">
<hot :hotList='i.hotList'></hot>
<card name="推荐店铺"></card>
</template>
<template v-if="i.type === 'shop'">
<shop :shopList='i.shopList'></shop>
<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>
<icons></icons>
<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'
import icons from '@/components/index/icons.vue'
export default {
components: {
indexSwiper,
recommended,
card,
commodityList,
banner,
hot,
shop,
icons
},
data() {
return {
currentIndex: 0, // 选中的索引
scrollTop: 'top0', // scroll的tab标签跟随swiper滚动而滚动索引的id值
clentHeight: 0, // 组件的高度
topBar: [],
newTopBar: []
}
},
onLoad() {
this.__init()
},
onReady() {
// 获取系统信息 设置可视区域的值
uni.getSystemInfo({
success: (res) => {
this.clentHeight = res.windowHeight - this.getClientHeight();
console.log(res.windowHeight);
}
})
},
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 = this.initData(data);
console.log(this.newTopBar);
}
})
},
// 修改数据结构
initData(res) {
let arr = [];
for (let i = 0; i < this.topBar.length; i++) {
let obj = {
data: [],
load: "first"
}
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;
// 切换不同的页签内容 ,每一次滑动赋值判断
if (this.newTopBar[this.currentIndex].load === 'first') {
this.addData();
}
},
// 滑动swiper,切换对应的topBar
changeSwiper(e) {
this.changeTap(e.detail.current)
// console.log(e.detail.current)
},
// 获取可视区域的高【兼容】
getClientHeight() {
let res = uni.getSystemInfoSync()
let platform = res.platform
if (platform == 'android') {
return res.statusBarHeight - 4
} else if (platform == 'ios') {
return 44 + res.statusBarHeight
} else {
return uni.upx2px(250)
}
},
// 对应现实不同数据
addData() {
// 拿到topBar对应的id
let index = this.currentIndex;
let id = this.topBar[index].id
console.log(id, 'dddd');
uni.request({
url: `http://192.168.31.62:3000/api/index_list/${id}/data/1`,
success: (res) => {
if (res.statusCode != 200) {
return;
} else {
let data = res.data.data;
console.log(data);
this.newTopBar[index].data = [this.newTopBar[index].data, ...data];
};
}
})
this.newTopBar[index].load = 'last';
}
}
}
</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>
