自定义tabbar组件,根据uni-app的easycom将其精简为- 步。只要组件安装在项目的components目录下或uni_ modules目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。
<template>
<view class="tab-bar">
<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
<image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath">image>
<view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}view>
view>
view>
template>
<script>
export default {
props: {
selected: { //当前选中的tab index
type: Number,
default: 0
}
},
data() {
return {
color: "#3a3a3a",
selectedColor: "#32e8e6",
borderStyle: "black",
backgroundColor: "#ffffff",
list: [{
pagePath: "/pages/index/index",
iconPath: "/static/tab-home.png",
selectedIconPath: "/static/tab-home-current.png",
text: "首页"
},{
pagePath: "/pages/category/category",
iconPath: "/static/tab-cate.png",
selectedIconPath: "/static/tab-cate-current.png",
text: "分类"
},{
pagePath: "/pages/cart/cart",
iconPath: "/static/tab-cart.png",
selectedIconPath: "/static/tab-cart-current.png",
text: "购物车"
},{
pagePath: "/pages/user/user",
iconPath: "/static/tab-my.png",
selectedIconPath: "/static/tab-my-current.png",
text: "我的"
}]
}
},
methods: {
switchTab(item, index) {
let url = item.pagePath;
uni.switchTab({
url:item.pagePath
})
},
}
}
script>
tabbar自定义组件组件种使用uni.switchTab跳转页面
uni.switchTab({
url: val.url
})
在pages.json配置tabbar,路径设置成一样
"tabBar": {
"color": "#C0C4CC",
"selectedColor": "#fa436a",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png",
"text": "首页"
},
{
"pagePath": "pages/category/category",
"iconPath": "static/tab-cate.png",
"selectedIconPath": "static/tab-cate-current.png",
"text": "分类"
},
{
"pagePath": "pages/cart/cart",
"iconPath": "static/tab-cart.png",
"selectedIconPath": "static/tab-cart-current.png",
"text": "购物车"
},
{
"pagePath": "pages/user/user",
"iconPath": "static/tab-my.png",
"selectedIconPath": "static/tab-my-current.png",
"text": "我的"
}
]
}
在App.vue里面设置隐藏tabbar
onShow: function() {
uni.hideTabBar()
},