导航栏
导航栏会默认依附在屏幕区域的底部
使用方式
<sp-tabbar :active="false">
<sp-tabbar-item text="音乐" url="/a">
<img slot="icon" src="http://img.zcool.cn/community/01524a56093f0a6ac7251df855d5c0.png@1280w_1l_2o_100sh.webp"/>
</sp-tabbar-item>
<sp-tabbar-item text="邮票" url="/b">
<img slot="icon" src="http://img.zcool.cn/community/0177295609403532f875a132b3ba65.png@1280w_1l_2o_100sh.webp"/>
</sp-tabbar-item>
<sp-tabbar-item text="电影" url="/c">
<img slot="icon" src="http://img.zcool.cn/community/017cc156093f0d6ac7251df8c18380.png@1280w_1l_2o_100sh.webp"/>
</sp-tabbar-item>
<sp-tabbar-item text="导航" url="/d">
<img slot="icon" src="http://img.zcool.cn/community/01f0f45609403632f875a1324dedfc.png@1280w_1l_2o_100sh.png"/>
</sp-tabbar-item>
</sp-tabbar>
sp-tabbar
props / 属性
| 参数 |
类型 |
默认值 |
作用 |
| active |
Boolean |
false |
选择是否切换icon，如果是请配置一个iconActive的插槽 |
sp-tabbar-item
props / 属性
| 参数 |
类型 |
默认值 |
作用 |
| text |
String |
Null |
每一个sp-tabbar-item的文本 |
| url |
String |
Null |
每一个sp-tabbar-item的跳转链接 |
slot / 插槽
| slot |
作用 |
| icon |
每一个sp-tabbar-item的图标 |
| iconActive |
每一个sp-tabbar-item选中后的图标 |