更新记录
1.0.0(2024-08-22)
下载此版本
首次发布
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
zero-tabs 组件
使用方法
符合easycom
组件模式,使用 uni_modules 导入直接使用即可
参数说明
参数 |
类型 |
默认值 |
说明 |
tabs |
Array |
[] |
传入数组, 数组元素中必须包含字段 name |
currentIndex |
Number |
0 |
当前选中项 |
backgroundColor |
String |
'transparent' |
背景颜色 |
height |
Number |
80 |
组件高度,单位默认rpx |
padding |
String |
'0 32rpx' |
内边距 |
defaultColor |
String |
'#333333' |
默认字体颜色 |
selectColor |
String |
'#0396FF' |
选中项颜色 |
size |
Number |
32 |
默认字号,默认rpx |
customLineWidth |
Number |
0 |
滑块宽度 默认px,默认px,默认px |
autoJustify |
Boolean |
false |
是否启用自动平均分布,当子元素宽度总和小于屏幕宽度时使用 |
needSticky |
Boolean |
false |
是否启用吸顶 |
offsetTop |
Number |
0 |
吸顶距离 |
fixedHolder |
Boolean |
true |
吸顶时占位盒子 |
async |
Boolean |
false |
是否启用异步 |
slider |
Boolean |
line |
滑块类型: line , capsule , none |
zIndex |
Number |
1 |
z-index |
capsuleOptions |
Object |
{} ,可不传 |
类型为胶囊的配置项,参考下方 |
capsuleOptions(胶囊模式配置项)
| 参数 | 类型 | 默认值 | 说明 |
|height | Number | - | 自定义胶囊高度 |
|radius | Number | - | 自定义胶囊圆角 |
|color | Number | '#0396FF' | 自定义胶囊颜色 |
emits
参数 |
返回值 |
change |
(index, item) |
使用示例
<template>
<view class="tabs">
<div class="zero-nav-title">基础使用</div>
<!-- <div class="section"> -->
<zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange" />
<!-- </div> -->
<div class="zero-nav-title">胶囊模式(需要自定义selectColor)</div>
<div class="section">
<zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange" slider="capsule"
selectColor="#ffffff" />
</div>
<div class="zero-nav-title">无滑块</div>
<div class="section">
<zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange" slider="none" />
</div>
<div class="zero-nav-title">自定义颜色</div>
<div class="section">
<zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange"
selectColor="#465CFF" defaultColor="#999999" />
</div>
<div class="zero-nav-title">自定义背景色</div>
<div class="section">
<zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange"
backgroundColor="#eeeeee" />
</div>
<div class="zero-nav-title">禁用选项</div>
<div class="section">
<zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange"
backgroundColor="#eeeeee" />
</div>
</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
const handleTabsChange = (index: number) => {
currentIndex.value = index;
};
const currentIndex = ref(0);
const categoryList = ref([
{ name: "推荐" },
{ name: "手机数码" },
{ name: "家用电器", disabled: true },
{ name: "电脑办公" },
{ name: "家居家装" },
{ name: "美妆个护" },
{ name: "服饰鞋包" },
{ name: "母婴童装" },
{ name: "图书音像" },
{ name: "房产汽车" },
{ name: "生鲜水果" },
{ name: "其他" },
]);
</script>
<style lang="scss" scoped>
.tabs {}
.zero-nav-title {
margin: 50rpx 0 20rpx 20rpx;
}
</style>
插件预览:
小程序搜索: zerojs 零技术
预览的小程序不一定能及时更新当前插件