更新记录

1.0.1(2024-07-19) 下载此版本

使用uni_modules规范

1.0.0(2023-07-03) 下载此版本

初始版本


平台兼容性

piaoyi-tabs 选项卡

使用实例:

<template>
    <view class="piaoyiui-container">
        <section v-for="(item,index) in tabs.list" :key="index">
            <view class="title">
                {{item.name}}
            </view>
            <piaoyi-tabs :list="item.value" :current="item.current" :show-bar="item.showBar"
                :vibrate-short="item.vibrateShort" :bar-style="item.barStyle" active-color="#24c789"
                :bold="tabs.bold" :active-item-style="item.activeItemStyle"
                @change="handleTabsChange($event, item)" />
        </section>
    </view>
</template>
<script>
    import piaoyiTabs from '@/uni_modules/piaoyi-tabs/components/piaoyi-tabs/piaoyi-tabs.vue'
    export default {
        data() {
            return {
                initValue: {
                    showBar: false,
                    vibrateShort: true,
                },
                tabs: {
                    list: [{
                            name: '默认类型',
                            current: 0,
                            value: [{
                                    name: '关注',
                                },
                                {
                                    name: '推荐',
                                },
                            ],
                        },
                        {
                            name: '是否带底部线条',
                            current: 0,
                            showBar: true,
                            value: [{
                                    name: '关注',
                                },
                                {
                                    name: '推荐',
                                },
                                {
                                    name: '电影',
                                },
                                {
                                    name: '电视剧',
                                },
                                {
                                    name: '视频',
                                },
                                {
                                    name: '游戏',
                                },
                            ],
                            barStyle: {
                                bottom: '-4rpx',
                            },
                        },
                        {
                            name: '自定义滑块样式(支持滚动)',
                            current: 0,
                            value: [{
                                    name: '关注',
                                },
                                {
                                    name: '推荐',
                                },
                                {
                                    name: '电影',
                                },
                                {
                                    name: '电视剧',
                                },
                                {
                                    name: '视频',
                                },
                                {
                                    name: '游戏',
                                }
                            ],
                            activeItemStyle: {
                                borderRadius: '50rpx',
                                color: '#fff',
                            },
                        },
                    ],
                    colorIndex: 0,
                    bold: true,
                },
            };
        },
        components: {
            piaoyiTabs
        },
        created() {
            this.init();
        },
        methods: {
            init(value, type) {
                for (const [index, item] of this.tabs.list.entries()) {
                    this.tabs[index] = {
                        ...this.initValue,
                        ...item,
                    };
                    if (index === 2) {
                        this.tabs.list[2].activeItemStyle.backgroundColor = '#24c789';
                    }
                }
            },
            handleTabsChange(index, item) {
                item.current = index;
                this.$forceUpdate();
            },
            handleCommonSwitch(e, type) {
                const {
                    value
                } = e.detail;
                this.tabs[type] = value;
                this.init(value, type);
                if (['colorIndex'].includes(type)) {

                }
            },
        },
    };
</script>
<style lang="scss" scoped>
    .piaoyiui-container {
        .title {
            font-weight: 700;
            font-size: 30rpx;
            line-height: 30rpx;
            padding: 0 30rpx;
            margin: 20rpx 0;
            color: #333;
        }
    }
</style>

Prop

参数名称 描述 默认值
is-scroll 是否允许滚动 true
list 标签数组,元素为对象,如[{name: '关注'}] []
current 激活状态索引 0
duration 滑块移动一次所需的时间,单位秒 默认0.5
height tabs高度,单位rpx 80
font-size tab文字大小,单位rpxtab文字大小,单位rpx 30
active-color 激活状态文字颜色 #24c789
inactive-color 非激活状态文字颜色 #333
active-item-style 活动tabs item的样式 对象,看上面示例
show-bar 是否显示底部的滑块 false
bar-width 滑块宽度,单位rpx 40
bar-height 滑块高度,单位rpx 6
bg-color tabs导航栏的背景颜色 #fff
name list标签数组的属性名,即标签文本 name
bold 激活选项的字体是否加粗 true
vibrateShort 是否震动 true

可接定制化组件开发

右侧有本人代表作小程序二维码以及插件体验小程序,可以扫码体验,部分插件由于带有图片导致小程序无法正常发布,所以只展示部分插件

如使用过程中有问题或有一些好的建议,欢迎群互相学习交流:

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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