更新记录

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

可接定制化组件开发

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

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