修改的部分：
完整代码：
<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'}" @scrolltolower="loaderMore(index)">
<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>
<!-- 上拉加载更多数据 -->
<view class="f-load f-color">
{{item.loadText}}
</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 $http from '@/common/api/request.js'
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() {
$http.request({
url: '/index_list/data'
}).then((res) => {
this.topBar = res.topBar;
this.newTopBar = this.initData(res);
}).catch(() => {
uni.showTabBar({
title: '请求失败',
icon: 'none'
})
})
// 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",
loadText: '上拉加载更多。。。'
}
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(callback) {
// 拿到topBar对应的id
let index = this.currentIndex;
let id = this.topBar[index].id
// 请求不同的数据
let page = Math.ceil(this.newTopBar[index].data.length / 5) + 1;
$http.request({
url: `/index_list/${id}/data/${page}`,
}).then((res) => {
this.newTopBar[index].data = [...this.newTopBar[index].data, ...res];
}).catch(() => {
uni.showTabBar({
title: '请求失败',
icon: 'none'
})
});
// uni.request({
// url: `http://192.168.31.62:3000/api/index_list/${id}/data/${page}`,
// 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';
// 上拉加载更多请求数据
if (typeof callback === 'function') {
callback();
}
},
// 上拉触底加载更多
loaderMore(index) {
this.newTopBar[index].loadText = '加..。'
// 请求完数据， 文字提示信息有换成【上拉加载更多】
this.addData(() => {
this.newTopBar[index].loadText = '上拉加载更多...'
})
}
}
}
</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;
}
.f-load {
border-top: 2rpx solid #636263;
line-height: 60rpx;
text-align: center;
}
</style>
