You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.3 KiB
55 lines
1.3 KiB
2 months ago
|
# zw-tabbar自定义tabbar
|
||
|
|
|
||
|
|
### 使用事例
|
||
|
|
```
|
||
|
|
<template>
|
||
|
|
<view>
|
||
|
|
<view v-show="tabBarIdx==0">第一页</view>
|
||
|
|
<view v-show="tabBarIdx==1">第二页</view>
|
||
|
|
<view v-show="tabBarIdx==2">第三页</view>
|
||
|
|
<view v-show="tabBarIdx==3">第四页</view>
|
||
|
|
<view v-show="tabBarIdx==4">第五页</view>
|
||
|
|
<zwTabBar :defaultSel="0" :list="tabBarList" @clickTab="clickTab" :bigIdx="2"></zwTabBar>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import zwTabBar from "@/components/zw-tabbar/zw-tabbar.vue";
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
zwTabBar
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabBarIdx: 0,
|
||
|
|
tabBarList: [{
|
||
|
|
"pagePath": "/pages/home",//不跳转页面时不传值
|
||
|
|
"iconPath": "/static/icon/tabBar/1.png",
|
||
|
|
"selectedIconPath": "/static/icon/tabBar/1_on.png",
|
||
|
|
"text": "首页"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
clickTab(idx) {
|
||
|
|
this.tabBarIdx = idx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Props参数
|
||
|
|
|参数|说明|类型|
|
||
|
|
|---|---|---|
|
||
|
|
|list|菜单配置|Array|
|
||
|
|
|color|默认颜色|String|
|
||
|
|
|defaultSel|默认选中菜单|Number|
|
||
|
|
|hoverColor|选中颜色|String|
|
||
|
|
|bigIdx|大图标显示菜单-1为未开启|Number|
|
||
|
|
|
||
|
|
### 事件
|
||
|
|
clickTab 切换标签时触发
|
||
|
|
|
||
|
|
### 联系作者
|
||
|
|
QQ:332899846
|