标签 Web前端 下的文章

前言:

经验分享,业务场景中日常使用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