更新记录

1.0.0（2024-02-07）

sevenq-tab组件支持自定义tab样式以及自定义插槽，非常方便用户使用，摆脱以往的大众化tab组件

平台兼容性

sevenq-tab

使用说明

sevenq-tab组件支持自定义tab样式以及自定义插槽，非常方便用户使用，摆脱以往的大众化tab组件。后续版本将会根据用户信息反馈持续迭代更新哈。

注意：如果想要完美使用此组件，需要仔细阅读文档哈，有问题随时评论，看到第一时间回复。

组件传参信息

个别参数解释说明

            tabList: [{//传递几个就显示几个tab栏（一般最3>tab>2）
                        id: 1,
                        label: '数据报告',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                    {
                        id: 2,
                        label: '数据诊断',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                    {
                        id: 3,
                        label: '数据复查',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                ],
                **--注意事项--** 
                **自定义tab栏样式 
                 *APP端传入即可
                 *微信小程序端需要自己在css添加伪类元素（高度和传入高度一致即可）
                **
                objectStyle: { //自定义tab组件样式
                    tabHeight: "50px",
                    activeColor: "#ffffff",
                    defaultColor: "#e2e8f8",
                    primaryColor: "#506CEB",
                    borderRadius: '12px'
                }
                //仅微信小程序端添加样式
               /* #ifdef MP-WEIXIN */
                ::v-deep .tab-list .tab-selected::before {
                    height: 50px !important;
                }

                ::v-deep .tab-list .tab-selected::after {
                    height: 50px !important;
                }

                ::v-deep .tab-list .not-selected::before {
                    height: 50px !important;
                }

                ::v-deep .tab-list .not-selected::after {
                    height: 50px !important;
                }
                /* #endif */

注意： 本组件完全遵守按需导入规则哈，不需要页面单独引入，下载到项目中直接可以使用

页面中使用

<template>
    <view class="content">
        <sevenq-tab :active-tab="activeTab" :tab-list="tabList" :object-style="objectStyle" @change="onTab">
            <template v-slot:1>
                <view class="inner-box">这是tab1的内容</view>
            </template>
            <template v-slot:2>
                <view class="inner-box">这是tab2的内容</view>
            </template>
            <template v-slot:3>
                <view class="inner-box">这是tab3的内容</view>
            </template>
        </sevenq-tab>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                activeTab: 1,
                tabList: [{
                        id: 1,
                        label: '数据报告',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                    {
                        id: 2,
                        label: '数据诊断',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                    {
                        id: 3,
                        label: '数据复查',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                ],
                objectStyle: { 
                    tabHeight: "50px",
                    activeColor: "#ffffff",
                    defaultColor: "#e2e8f8",
                    primaryColor: "#506CEB",
                    borderRadius: '12px'
                }
            };
        },
        methods: {
            onTab(e) {
                this.activeTab = e
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        margin: 20rpx;
    }

    .inner-box {
        width: 100%;
        height: 420rpx;
        background-color: #fff;
        padding: 20rpx;
        border-bottom-left-radius: 24rpx;
        border-bottom-right-radius: 24rpx;
    }

    /* #ifdef MP-WEIXIN */
    ::v-deep .tab-list .tab-selected::before {
        height: 50px !important;
    }

    ::v-deep .tab-list .tab-selected::after {
        height: 50px !important;
    }

    ::v-deep .tab-list .not-selected::before {
        height: 50px !important;
    }

    ::v-deep .tab-list .not-selected::after {
        height: 50px !important;
    }
    /* #endif */
</style>