yxy/uniapp/uni_modules/z-tabs

z-tabs

---

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

---

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

参数	说明	类型	默认值	可选值
list	数据源数组，支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式	Array	[]	-
current	当前选中的index	Number|String	0	-
scroll-count	list数组长度超过scrollCount时滚动显示(不自动铺满全屏)	Number|String	5	-
tab-width	自定义每个tab的宽度，默认为0，即代表根据内容自动撑开，单位rpx，支持传100、"100px"或"100rpx"	Number|String	0	0
bar-width	滑块宽度，单位rpx，支持传100、"100px"或"100rpx"	Number|String	45rpx	-
bar-height	滑块高度，单位rpx，支持传100、"100px"或"100rpx"	Number|String	8rpx	-
bar-style	滑块样式，其中的width和height将被bar-width和bar-height覆盖	Object	{}	-
bottom-space	tabs与底部的间距，单位rpx，支持传100、"100px"或"100rpx"	Number|String	8rpx	-
bar-animate-mode	【v0.1.5起支持】切换tab时滑块动画模式，与swiper联动时有效，点击切换tab时无效，必须调用setDx。默认为line，即切换tab时滑块宽度保持不变，线性运动。可选值为worm，即为类似毛毛虫蠕动效果	String	line	worm
name-key	list中item的name(标题)的key	String	name	-
value-key	list中item的value的key	String	value	-
active-color	激活状态tab的颜色	String	#007AFF	-
inactive-color	未激活状态tab的颜色	String	#666666	-
disabled-color	禁用状态tab的颜色	String	#bbbbbb	-
active-style	激活状态tab的样式	Object	{}	-
inactive-style	未激活状态tab的样式	Object	{}	-
disabled-style	禁用状态tab的样式	Object	{}	-
badge-max-count	徽标数最大数字限制，超过这个数字将变成badge-max-count+	Number|String	99	-
badge-style	徽标样式，例如可自定义背景色，字体等等	Object	{}	-
bg-color	z-tabs背景色	String	white	-
tabs-style	z-tabs样式	Object	{}	-
init-trigger-change	初始化时是否自动触发change事件	Boolean	true	false

events

事件名	说明	回调参数
@change	tabs改变(点击)时触发	参数1:index(当前切换到的index)； 参数2:value(当前切换到的value)
@secondClick	tabs二次点击时触发	参数1:index(当前切换到的index)； 参数2:value(当前切换到的value)

methods

方法名	说明	参数
setDx	根据swiper的@transition实时更新底部dot位置	swiper的@transition中的e.detail.dx
unlockDx	在swiper的@animationfinish中通知z-tabs结束多setDx的锁定，若在父组件中调用了setDx，则必须调用unlockDx	-
updateSubviewLayout	在nvue+安卓中，若在cell中使用z-tabs，且页面加载时cell在屏幕之外，因cell的复用机制，可能导致z-tabs内部的布局失效：例如底部bar无法显示，此时可在list滚动到一定区域内(例如快显示z-tabs)的时候调用此方法以更新其内部布局。其他情况无需调用！	-

slots

名称	说明
left	tabs左侧插槽
right	tabs右侧插槽

支持全局配置

• 在/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>