更新记录

1.0.3（2025-12-02） 下载此版本

1.更新角标功能 2.简化示例

1.0.2（2025-08-07） 下载此版本

1.增加参数说明

1.0.1（2025-08-07） 下载此版本

1.更新使用文档

平台兼容性

uni-app(4.0)

其他

sk-tab-bar

已上线的项目：珊瑚打码小程序

基础使用

不支持与原生tabBar路由跳转使用

<template>
    <view class="bg" :style="{'--bg':outerApertureBorderColor}">
        <div class="tab-demo">
            <view class="uni-title uni-common-mt">切换弧度背景样式</view>

            <radio-group @change="radioChange" class="flex">
                <label class="flex" v-for="(item, index) in colorList" :key="item.value">
                    <view>
                        <radio :value="item.value" :checked="index === current" />
                    </view>
                    <view :style="{color:index==2?'red': item.value}">{{item.name}}</view>
                </label>
            </radio-group>
        </div>
        <sk-tab-bar :data="list" :iconBackgroundColor="iconBackgroundColor"
            :outerApertureBorderColor="outerApertureBorderColor"></sk-tab-bar>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import icon1Active from "@/static/icon1.png"
    import icon1 from "@/static/66.png"
    import icon2Active from "@/static/icon2.png"
    import icon2 from "@/static/77.png"

    const colorList = ref([{
        value: '#e07800',
        name: '#e07800',
        checked: 'true'
    },
    {
        value: '#c30c00',
        name: '#c30c00'
    },
    {
        value: '#f2f3f7',
        name: '复原'
    },

    ])
    const current = ref(0)
    const list = ref([{
        icon: icon1,
        active: icon1Active,
        text: '首页',
        width: '36px',
        height: '36px',
    },
    {
        icon: icon2,
        active: icon2Active,
        text: '资源列表',
        width: '36px',
        height: '36px',
    },
    ])

    const outerApertureBorderColor = ref('#f2f3f7')
    const iconBackgroundColor = ref()

    const radioChange = (evt) => {
        for (let i = 0; i < colorList.value.length; i++) {
            if (colorList.value[i].value === evt.detail.value) {
                current.value = i;
                break;
            }
        }
        console.log(evt)
        outerApertureBorderColor.value = evt.detail.value
        // iconBackgroundColor.value = evt.detail.value
    }
</script>

API 参考

Props

Methods

tabBar类型