更新记录

0.3.0（2024-10-21） 下载此版本

支持鸿蒙Next

0.2.7（2024-07-18） 下载此版本

1.新增 支持切换rpx&px
2.修复 宽度小于屏幕时底部tabs位置不正确的问题
3.修复 偶现的Cannot read property 'left' of undefind的问题

0.2.5（2023-01-09） 下载此版本

修复可能出现的可能出现的与swiper联动时报错node不存在的bug

平台兼容性

z-tabs

反馈qq群(点击加群)：371624008

z-tabs文档

安装

方式1(推荐)：通过uni_modules安装，在插件市场中点击右上角【使用HbuilderX导入插件】即可。

方式2：通过npm安装

//若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程
npm init -y

//安装
npm install @zxlee/z-tabs --save
//更新
npm update @zxlee/z-tabs

然后在pages.json中配置easycom(注意：下方配置只有在使用npm安装时才需要配置！！！！！)

"easycom": {
    "^z-tabs": "@zxlee/z-tabs/components/z-tabs/z-tabs.vue"
}

基本使用

<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
                    },
                    // 可以禁用某个item
                    disabled: true
                });
            }
            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>