uni-app简单版⾃定义tabbar
最近在⽤uni-app，因为功能需要只能采⽤⾃定义tabbar，插件市场了很多都不符合⾃⼰的要求，只能⾃⼰简单开发⼀版了
编写组件
在components⽂件夹下新增tabbar.vue
<template>
<view>
<view class="tabbar-box" >
<view class="tabbar-list-box" v-for="(item,index) in list" :key="index" @click="SwitchTab(item)">
<image :src="item.id==state?item.selectedIconPath:item.iconPath" mode="heightFix" class="img-icon"></image>
<view class="tabbar-text" :>{{item.name}}</view>
</view>
selectediconpath什么意思</view>
</view>
</template>
<script>
export default {
name:"tabbar",
props:{
state: ''
},
data() {
return {
list:[
{id:'1',name:'矿机',iconPath:'/static/images/mill-icon.png',selectedIconPath:'/static/images/mill-check-icon.png',pagePath:'/pages/mill/mill'},
{id:'2',name:'钱包',iconPath:'/static/images/wallet-icon.png',selectedIconPath:'/static/images/wallet-check-icon.png',pagePath:'/pages/wallet/wallet'},    {id:'3',name:'我的',iconPath:'/static/images/my-icon.png',selectedIconPath:'/static/images/my-check-icon.png',pagePath:'/pages/my/my'},
]
};
},
onLoad() {
},
methods:{
SwitchTab(item){
console.log(item)
uni.switchTab({
url: item.pagePath
});
}
}
}
</script>
list为tabbar的数组，name为tabbar标题，iconPath是未选中时的icon，selectedIconPath时选中tabbar时的icon，pagePath为跳转路径。当state对应数组id时为选中状态。
导⼊组件
pages⽬录下的页⾯级组件使⽤⾃定义组件
<script>
import tabbar from '../../components/tabbar/tabbar.vue'
export default {
components: {
tabbar,
},
data() {
return {
state:'1', // tabbar标识
}
},
onLoad(){
uni.hideTabBar()
}
}
</script>
在页⾯级组件上需要规定state标识，否则tabbar组件会报错，在页⾯加载时需要隐藏原⽣tabbar，不隐藏的话会出现两个tabbar，⼀个为原⽣，⼀个为⾃定义，之所以原⽣还保留，主要是想要⽤tabbar跳转⽅式，⽤其他⽅式跳转不是特别好。
page.json定义tabBar设置
"tabBar": {
// "custom": true,
"color": "#afafaf",
"selectedColor": "#EE9D23",
"borderStyle": "white",
"backgroundColor": "#F7F7F7",
// "iconWidth": "48rpx",
// "height":"98rpx",
// "fontSize":"24rpx",
"list": [
{
"pagePath": "pages/mill/mill",
"iconPath": "/static/images/mill-icon.png",
"selectedIconPath": "/static/images/mill-check-icon.png",
"text": "矿机"
},
{
"pagePath": "pages/wallet/wallet",
"iconPath": "/static/images/wallet-icon.png",
"selectedIconPath": "/static/images/wallet-check-icon.png",
"text": "钱包"
},
{
"pagePath": "pages/my/my",
"iconPath": "/static/images/my-icon.png",
"selectedIconPath": "/static/images/my-check-icon.png",
"text": "我的"
}
]
},
使⽤组件
<template>
<tabbar :state="state"></tabbar>
</template>
这只针对于app端的⾃定义，⼩程序的⾃定义可以在page.json的tabbar加上"custom": true, 并在页⾯级加载时不⽤隐藏tabbar即可使⽤。
因为项⽬赶着上线所以tabbar会有点粗糙，但基本够⽤，唯⼀不够好的就是在页⾯加载时会出现⼀点img图⽚加载事件，后期有空了会尝试复杂⼀点的写法，尽量完善。
最后效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。