|
应用首页存在多个顶部导航tab，且每个tab下都有不一样的内容和样式，怎么在不影响数据的情况下，优化用户体验。
头部导航栏+显示区域--
<view class="navbar">
<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }"
@click="tabClick(index)">
{{ item.text }}
</view>
</view>
<!-- 显示区域 -->
<view class="list" v-for="(item, index) in navList" :key="index" v-if="tabCurrentIndex === index">
<!-- 暂未开通 -->
<view class="lj-errorimg" v-if="index > 0">
<image class="did-not" src="../../static/xiaowu.png" mode=""></image>
</view>
<!-- 首页 -->
<view class="" v-if="index == 0">
<!-- 轮播图 -->
<carouselList :carouselList="carouselList"></carouselList>
<!-- 商品列表 -->
<goodsList :list="item.list" :navlist="navList" :state="0"></goodsList>
<lj-load-more :loadingType="navList[index].loadingType" :contentText="navList[index].contentText"></lj-load-more>
</view>
</view>
导航栏js--切换
//顶部tab点击
tabClick(index) {
this.tabCurrentIndex = index;
if (this.navList[index].status == false) {
//点击切换tab并调用下拉刷新，请求tab项的数据--当status状态为false时
this.getnewsList();
}
},
data里的数据--
data() {
return {
tabCurrentIndex: 0,
carouselList: [], //轮播图
navList: [{
text: '首页',
loadingText: '加载中...',
loadingType: 0,
contentText: {
contentdown: '',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
list: [], //tab第一页的数据
page: 1,
url: this.GLOBAL + "/api/store/store_domain_list", //第一页请求的接口
status: false //默认状态
},
{
text: '商城',
// loadingText: '加载中...',
// loadingType: 0,
// contentText: {
// contentdown:'',
// contentrefresh: '正在加载...',
// contentnomore: '没有更多数据了'
// },
// list: [],
// page: 1,
// url: "http://shop_platform.test/api/store/store_domain_list00000",
// status: false
},
{
text: '自贸区',
},
{
text: '智造',
},
{
text: '商圈',
},
],
};
},
这里用的上拉加载和下拉刷新为 uni-app插件市场里的，点个赞！
//下拉刷新的时候请求一次数据
onPullDownRefresh: function() {
this.getnewsList();
},
//触底的时候请求数据，即为上拉加载更多
onReachBottom: function() {
this.getmorenews();
},
下拉刷新--
// 下拉刷新
getnewsList() {
//tab的下标
let index = this.tabCurrentIndex;
当点击其他几个tab时 停止下拉刷新
if (index > 0) {
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
return;
}
this.navList[index].page = 1;
this.navList[index].loadingType = 0;
uni.showNavigationBarLoading();
uni.request({
header: {
'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
},
url: this.navList[index].url,
method: 'GET',
data: {
page: this.navList[index].page,
per_page: per_page
},
success: res => {
if (res.data.code == 200000) {
// 当请求过一次之后--status变为true,再次点击tab按钮不再请求数据
this.navList[index].status = true;
if (index == 0) {
this.navList[index].page++;
this.navList[index].list = res.data.data;
}
} else {
uni.stopPullDownRefresh();
}
},
fail: () => {
uni.stopPullDownRefresh();
},
complete: () => {}
});
},
上拉加载--
getmorenews: function() {
let index = this.tabCurrentIndex;
if (this.navList[index].loadingType !== 0) { //loadingType!=0;直接返回
return false;
}
this.navList[index].loadingType = 1;
uni.showNavigationBarLoading(); //显示加载动画
uni.request({
header: {
'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
},
url: this.navList[index].url,
method: 'GET',
data: {
page: this.navList[index].page,
per_page: per_page
},
success: res => {
if (res.data.code == 200000) {
if (res.data.data.data == '') { //没有数据
this.navList[index].loadingType = 2;
uni.hideNavigationBarLoading(); //关闭加载动画
return;
}
this.navList[index].page++; //每触底一次 page +1
if (index == 0) {
this.navList[index].list = this.navList[index].list.concat(res.data.data);
}
this.navList[index].loadingType = 0; //将loadingType归0重置
uni.hideNavigationBarLoading(); //关闭加载动画
} else {
uni.stopPullDownRefresh();
}
},
fail: () => {
uni.stopPullDownRefresh();
},
complete: () => {}
});
},
到这里就结束了，接口是本地测试的，这里只展示了第一页的内容，其他页，需要在标签里自己加内容。 | 
转播
