uniapp 实现小程序中自定义tabBar 的方法
第一种方式: page.json中配置
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#007AFF",
"borderStyle": "black",
"backgroundColor": "#F8F8F8",
"fontSize": "12px",
"spacing": "5px",
"height": "50px",
"list" : [
{
"pagePath": "pages/index/index",
"text": "头像",
"iconPath": "static/down.png",
"selectedIconPath": "static/down.png"
},
{
"pagePath": "pages/bizhi/index",
"text": "壁纸",
"iconPath": "static/bizhi.png",
"selectedIconPath": "static/bizhi.png"
},
{
"pagePath": "pages/zhenjian/index",
"text": "证件照",
"iconPath": "static/zhenjian.png",
"selectedIconPath": "static/zhenjian.png"
},
{
"pagePath": "pages/zhenjian/index",
"text": "头像易",
"iconPath": "static/txy.png",
"selectedIconPath": "static/txy.png"
}
]
},
定义的内容需要在pages 中声明了。
这种方式定义比较快速，简单。
如果需要根据用户权限，或者在tabBar 上自定义一些逻辑，需要使用自定义的内容
第二种方式 自定义内容
<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: "#333333",
selectedColor: "#d4237a",
list: [
{
"pagePath": "pages/index/index",
"text": "头像",
"iconPath": "https://bj.bcebos.com/txy-dev/txy/main/down.png",
"selectedIconPath": "https://bj.bcebos.com/txy-dev/txy/main/down.png"
},
{
"pagePath": "pages/bizhi/index",
"text": "壁纸",
"iconPath": "https://bj.bcebos.com/txy-dev/txy/main/bizhi.png",
"selectedIconPath": "https://bj.bcebos.com/txy-dev/txy/main/bizhi.png"
},
{
"pagePath": "pages/bizhi/index",
"text": "证件照",
"iconPath": "https://bj.bcebos.com/txy-dev/txy/main/zhenjian.png",
"selectedIconPath": "https://bj.bcebos.com/txy-dev/txy/main/zhengjian.png"
},
{
"pagePath": "pages/bizhi/index",
"text": "头像易",
"iconPath": "https://bj.bcebos.com/txy-dev/txy/main/txy.png",
"selectedIconPath": "https://bj.bcebos.com/txy-dev/txy/main/txy.png"
}
]
}
},
methods: {
switchTab(item, index) {
console.log("item", item)
console.log("index", index)
let url = item.pagePath;
// 对应患者和医生的首页
if (index == 0) {
url = "/pages/index/index"
}
// 对应患者和医生的我的页面
if (index == 1) {
url = "/pages/bizhi/index"
}
if (index == 2) {
uni.navigateToMiniProgram({
appId: 'wxac06eaffe466baa3',
})
// wxacd92e691aba23dd
// wxac06eaffe466baa3
return
}
if (index == 3) {
uni.navigateToMiniProgram({
appId: 'wxacd92e691aba23dd',
})
// wxacd92e691aba23dd
// wxac06eaffe466baa3
return
}
uni.switchTab({
url
})
}
}
}
</script>
<style lang="less">
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: white;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.tab_img {
width: 37rpx;
height: 41rpx;
}
.tab_text {
font-size: 20rpx;
margin-top: 9rpx;
}
}
}
</style>
在需要用到tabBar 的页面 引用。 并且需要关闭第一种方法中默认的
onShow() {
uni.hideTabBar({
animation: false
})
},
下面是我的小程序体验码，希望能和大家共同学习进步
[项目代码] https://gitee.com/eyes-star/txy-openmp.git
[项目代码] https://gitee.com/eyes-star/zjz-openmp.git
