z-tabs
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>
f6e6ae8c9d