更新记录

0.1.6（2023-10-31） 下载此版本

优化首次加载tabs时底部bar的展示速度

平台兼容性

uni-app

其他

z-tabs

反馈***(点击加群)：790460711

z-tabs文档

基本使用

<template>
    <z-tabs :list="list"></z-tabs>
</template>

<script>
    export default {
        data() {
            return {
                list: []
            }
        },
        onLoad() {
            const list = [];
            for(let i = 0;i < 10;i++) {
                // list内item支持字符串或对象，下方这个是字符串
                list.push('tab标题');

                // 如果要展示徽标数，则list中item的数据结构应为：
                list.push({
                    name: 'tab标题',
                    badge: {
                        // 设置徽标数为6
                        count: 6
                    }
                });
            }
            this.list = list;
        }
    }
</script>

props

events

methods

slots

支持全局配置

• 在/z-tabs/components/z-tabs/config/index.js文件中进行配置

export default {
    'active-color': 'red'
}

【v0.1.4起支持】底部dot与swiper联动演示

<template>
  <z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
  <swiper :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
    <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
      xxx
    </swiper-item>
  </swiper>
<template>
<script>
    export default {
        data() {
            return {
                tabList: ['测试1','测试2','测试3','测试4'],
                current: 0, // tabs组件的current值，表示当前活动的tab选项
            };
        },
        methods: {
            //tabs通知swiper切换
            tabsChange(index) {
                this.current = index;
            },
            //swiper滑动中
            swiperTransition(e) {
                this.$refs.tabs.setDx(e.detail.dx);
            },
            //swiper滑动结束
            swiperAnimationfinish(e) {
                this.current = e.detail.current;
                this.$refs.tabs.unlockDx();
            }
        }
    }
</script>

样例

<template>
    <view class="content">
        <!-- 基本使用 -->
        <view class="group">
            <text class="group-title">
                基本使用
            </text> 
            <z-tabs :list="list"></z-tabs>
        </view>

        <!-- 自定义高亮颜色 -->
        <view class="group">
            <text class="group-title">
                自定义高亮颜色
            </text> 
            <z-tabs :list="list" active-color="orange"></z-tabs>
        </view>

        <!-- 自定义高亮style -->
        <view class="group">
            <text class="group-title">
                自定义高亮style
            </text> 
            <z-tabs :list="list" :active-style="{'font-size':'40rpx','font-weight':'bold'}"></z-tabs>
        </view>

        <!-- 自定义初始选中tab -->
        <view class="group">
            <text class="group-title">
                自定义初始选中tab
            </text> 
            <z-tabs :list="list" :current="5"></z-tabs>
        </view>

        <!-- 显示徽标数 -->
        <view class="group">
            <text class="group-title">
                显示徽标数
            </text> 
            <z-tabs :list="badgeList"></z-tabs>
        </view>

        <!-- 自定义右侧插槽 -->
        <view class="group">
            <text class="group-title">
                自定义右侧插槽
            </text> 
            <z-tabs :list="list">
                <template v-slot:right>
                    <view style="margin: 0 10rpx;">🏡</view>
                </template>
            </z-tabs>
        </view>

        <!-- 二次点击触发事件 -->
        <view class="group">
            <text class="group-title">
                二次点击触发事件
            </text> 
            <z-tabs :list="list" @secondClick="secondClick"></z-tabs>
        </view>

        <!-- 与swiper联动 -->
        <view class="group">
            <text class="group-title">
                与swiper联动
            </text> 
            <!-- 可通过设置bar-animate-mode="worm"开启毛毛虫模式-->
            <z-tabs ref="tabs" :current="swiperCurrent" :list="swiperList" @change="tabsChange"></z-tabs>
            <swiper class="swiper" :current="swiperCurrent" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
                <swiper-item v-for="(item, index) in swiperList" :key="index">
                    <view class="swiper-item-view" :style="{backgroundColor: item.color}">
                        {{item.name}}
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <!-- #ifdef APP-PLUS -->
        <view class="to-nvue-btn" @click="gotoNvue">
            查看nvue-demo
        </view>
        <!-- #endif -->
        <!-- #ifndef APP-PLUS -->
        <view class="notice">
            —— 将demo运行至APP平台可查看nvue中的运行效果 ——
        </view>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                badgeList: [],
                swiperList: [],
                swiperCurrent: 0
            }
        },
        onLoad() {
            //普通情况数组
            const list = [];
            for(let i = 0;i < 10;i++) {
                list.push('tab' + (i + 1));
            }
            this.list = list;

            //自定义徽标数数组
            const badgeList = [];
            for(let i = 0;i < 10;i++) {
                if(i !== 2){
                    badgeList.push({
                        name: 'tab' + (i + 1),
                    });
                }else {
                    badgeList.push({
                        name: 'tab' + (i + 1),
                        badge: {
                            count: 6
                        }
                    });
                }
            }
            this.badgeList = badgeList;

            //与swiper联动数组
            const swiperList = [];
            for(let i = 0;i < 4;i++) {
                swiperList.push({
                    name: 'tab' + (i + 1),
                    color: this._getRandomColor()
                });
            }
            this.swiperList = swiperList;
        },
        methods: {
            gotoNvue(){
                uni.navigateTo({
                    url: '/pages/index-nvue/index-nvue'
                })
            },

            //tabs通知swiper切换
            tabsChange(index) {
                this.swiperCurrent = index;
            },
            //swiper滑动中
            swiperTransition(e) {
                this.$refs.tabs.setDx(e.detail.dx);
            },
            //swiper滑动结束
            swiperAnimationfinish(e) {
                this.swiperCurrent = e.detail.current;
                this.$refs.tabs.unlockDx();
            },

            // 生成随机颜色
            _getRandomColor() {
                const rgb = [];
                for (let i = 0; i < 3; ++i) {
                    let color = Math.floor(Math.random() * 256).toString(16)
                    color = color.length == 1 ? '0' + color : color
                    rgb.push(color)
                }
                return '#' + rgb.join('');
            },

            //二次点击触发事件
            secondClick(index,item){
                uni.showToast({
                    title: `tab${index+1},二次点击确认`,
                    icon: 'none'
                })
            }
        }
    }
</script>

<style>
    .content{
        padding-bottom: 20rpx;
    }
    .group{
        margin-top: 30rpx;
    }
    .group-title{
        padding-left: 20rpx;
        font-size: 26rpx;
        color: #aaaaaa;
    }
    .swiper{
        height: 300rpx;
    }
    .swiper-item-view{
        background-color: #007AFF;
        height: 300rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 50rpx;
    }
    .to-nvue-btn{
        background-color: #007AFF;
        height: 80rpx;
        color: white;
        text-align: center;
        line-height: 80rpx;
        width: calc(100% - 40rpx);
        margin-left: 20rpx;
        margin-top: 20rpx;
        border-radius: 10rpx;
    }
    .notice{
        text-align: center;
        color: #aaaaaa;
        font-size: 24rpx;
        margin-top: 30rpx;
    }
</style>