前言:

经验分享，业务场景中日常使用Tabs切换组件,而Uniapp路由，滑动切换，写项目的时候整理了下面这样的一个模板

效果图：

晚点补充

关键点：

1.Swiper需要固定高度的，无法被内容撑开，这边写了一个函数setSwiperHeight（）去动态计算高度

HTML:

<swiper :current="tabIndex" :style="{ height: swiperheight + 'px' }" @change="swiperChange">
    <swiper-item class="wisdomActivity" v-for="(tabitem, tabs_i) in tablist" :key="tabs_i">
    </swiper-item>
</swiper>

JS:

setSwiperHeight() {
    let windowHeight = uni.getSystemInfoSync().windowHeight;
    var query = uni.createSelectorQuery();
        query
        .select('.uni-swiper-header')
        .boundingClientRect(rect => {
            if (rect) {
                this.swiperheight = windowHeight - rect.height;
            }
        })
        .exec();
}

摘自Uniapp官方文档：

nodesRef.boundingClientRect(callback)添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

2.NoContent与Content

这里实现的目的是tabs切换页面的时候，如果Content为空，则请求数据，否则就不请求。

tablist: [
                {
                    Name: '标签1',
                    noContent: true, //Content是否有内容
                    Content: []
                },
                {
                    Name: '标签2',
                    noContent: false,
                    Content: []
                },
                ......
            ]

JS请求内容方法

isconcat true下拉加载更多(是否拼接数据) false刷新重新请求整个列表

        getContentList(isconcat) {
            //isconcat True下拉加载更多 false 刷新
            let offset = 0;
            let that = this;
            if (isconcat) {
                offset = that.tablist[that.tabIndex].Content;
            }
            // 假象接口  offset 10为获取内容长度
            GetContent(offset, 10).then(res => {
                let TmpList = that.tab;
                if (res.Success) {
                    if (res.Data == null) {
                        res.Data == {};
                    }
                    if (isconcat) {
                        TmpList = TmpList.concat(res.Data);
                    } else {
                        TmpList = res.Data;
                    }
                    that.tablist[that.tabIndex].Content = TmpList;
                }
            });
        }

使用位置

// 初始化
onReady() {
         this.getContentList(false);
    },

    // 下拉加载更多
getMore() {
             this.getContentList(true);
        },

最后这边贴上源码地址

https://github.com/RogisterDu/TabsNavTemplate