import{e as s,o as a,G as t}from"./vendor.92dabd7f.js";const n={class:"markdown-body"},l=[t('Tabbar 标签栏
介绍
底部导航常用场景
安装
import { createApp } from 'vue';\n\nimport { Tabbar,TabbarItem } from '@nutui/nutui';\n\nimport { Tabbar,TabbarItem } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Tabbar);\napp.use(TabbarItem);\n\n
代码示例
基础用法
<nut-tabbar @tab-switch="tabSwitch">\n <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>\n <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>\n <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>\n</nut-tabbar>\n
setup() {\n function tabSwitch(item: object, index: number) {\n console.log(item, index);\n }\n return {\n tabSwitch,\n };\n},\n
自定义图片链接
<nut-tabbar @tab-switch="tabSwitch">\n <nut-tabbar-item tab-title="首页"\n img= 'http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg'\n activeImg='http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg'\n ></nut-tabbar-item>\n <nut-tabbar-item tab-title="分类" \n img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"\n activeImg='http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg'\n ></nut-tabbar-item>\n <nut-tabbar-item tab-title="发现" \n img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"\n activeImg='http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg'\n ></nut-tabbar-item>\n <nut-tabbar-item tab-title="购物车" \n img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"\n activeImg='http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg'\n ></nut-tabbar-item>\n <nut-tabbar-item tab-title="我的" \n img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"\n activeImg='http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg'\n ></nut-tabbar-item>\n</nut-tabbar>\n
自定义选中
<nut-tabbar v-model:visible="active">\n <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>\n <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>\n <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>\n</nut-tabbar>\n
setup() {\n const active = ref(2)\n return {\n active\n };\n},\n
徽标提示
<nut-tabbar>\n <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>\n <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>\n <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>\n</nut-tabbar>\n
自定义颜色
<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">\n <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>\n <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>\n <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>\n</nut-tabbar>\n
三个图标的标签栏
<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">\n <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>\n <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n</nut-tabbar>\n
固定底部，可自由跳转
<nut-tabbar :bottom="true">\n <nut-tabbar-item tab-title="首页" href="" icon="home"></nut-tabbar-item>\n <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>\n <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>\n <nut-tabbar-item\n tab-title="购物车"\n href="https://m.jd.com"\n icon="cart"\n ></nut-tabbar-item>\n <nut-tabbar-item\n tab-title="我的"\n href="######"\n icon="my"\n ></nut-tabbar-item>\n</nut-tabbar>\n
Prop
nut-tabbar
| 字段 | 说明 | 类型 | 默认值 |
|---|
| v-model:visible | 选中标签的索引值 | number | 0 |
| bottom | 是否固定在页面底部 | Booble | false |
| size | icon的尺寸/图片的宽高 | string | ‘20px’ |
| unactive-color | icon未激活的颜色 | string | #7d7e80 |
| active-color | icon激活的颜色 | string | #1989fa |
tabbar-item
| 字段 | 说明 | 类型 | 默认值 |
|---|
| tab-title | 标签页的标题 | String | – |
| icon | 标签页显示的图标名称 | String | – |
| img | 标签页显示图片链接 | String | – |
| activeImg | 激活以后的标签页显示图片链接（同一个item中icon和img只能选择一个） | String | – |
| href | 标签页的跳转链接 | String | – |
| num | 页签右上角的数字角标，超出99之后为99+ | Number | – |
Event
| 事件名称 | 说明 | 回调参数 |
|---|
| tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |
',29)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};