0.2.5 • Published 1 year ago
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>