更新记录

1.0.1(2021-01-11)

修复角标显示问题

1.0.0(2021-01-11)

初始化插件

查看更多

tabs

uni-app Tab组件,支持角标显示

组件使用方式

long-categories 复制到 uni-app项目中的 components目录即可

<template>
    <view>
        <long-tabs 
            :list="list"
            v-model="active"
            activeTextColor=""
        >
        </long-tabs>
        <view style="padding: 20px" v-for="(item, index) in list" :key="index" v-if="active === index">
            {{ item.label }}
        </view>
    </view>
</template>


    export default {
        data() {
            return {
                list: [],
                active: 0
            }
        },
        onLoad() {
            this.init()
        },
        watch: {
            active (val) {

            }
        },
        methods: {
            init () {
                this.list = [
                    { label: '全部'},
                    { label: '待清洁', badge: { bgcolor: '#F53B26', value: 12 } },
                    { label: '已清洁', badge: { bgcolor: '#6F61DA', value: 12 } },
                    { label: '已完成', badge: { bgcolor: '#2FC456', value: 12 } }
                ]
            }
        }
    }

属性

名称 类型 默认值 说明
list Array [] tabs数据
v-model Number 0 当前选中Tab索引
activeColor String #F88F1A 激活tab底部边框颜色,
activeTextColor String 激活tab文字颜色,使用组件默认颜色

list数据结构

名称 类型 说明
label String 显示文字
badge Object 角标对象,如果不需要角标显示。不写该属性即可

badge数据结构

名称 类型 说明
bgcolor String 角标背景颜色,默认为:#F53B26
value String 角标的显示值

使用示例

Github:https://github.com/songhailong8174/tabs

详细代码 Demo

插件截图

img

PS:如有问题可联系QQ(1365763165)或者提issure,如果帮到你了还请不要吝啬给个 Star

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问