基于vue的uni-app框架 h5移动端-首页多tab实现思路

应用首页存在多个顶部导航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: () => {}
                });
            },

到这里就结束了，接口是本地测试的，这里只展示了第一页的内容，其他页，需要在标签里自己加内容。