uniapp - 微信小程序 - 自定义底部tabbar

废话不多说，直接行源码

这里需要的底部tabbar的图片在这里我的资源里面呢

图片是这样的

先看成品吧

在这里插入图片描述

首先 - `BaseApp\components\Tabbar.vue`


<script setup>import {ref,nextTick,watch} from "vue"// 核心 - 隐藏uniapp自带的底部tabbaruni.hideTabBar()let current = ref(0)const list = ref([{pagePath: "pages/index/index",iconPath: '../static/tab/11.png',selectedIconPath: "../static/tab/1.png",text: "index"}, {pagePath: "pages/warn/index",iconPath: '../static/tab/22.png',selectedIconPath: "../static/tab/2.png",text: "warn"}, {pagePath: "pages/my/index",iconPath: '../static/tab/33.png',selectedIconPath: "../static/tab/3.png",text: "my"}, {pagePath: "pages/user/index",iconPath: '../static/tab/44.png',selectedIconPath: "../static/tab/4.png",text: "user"}, {pagePath: "pages/sign/index",iconPath: '../static/tab/55.png',selectedIconPath: "../static/tab/5.png",text: "sign"}])const changeTab = (e) => {uni.switchTab({url: `/${list.value[e].pagePath}`,})}// const props = defineProps(['current'])const props = defineProps({current: {type: String, // 或者其他你需要的类型  required: true // 如果这个 prop 是必需的  }})console.log('props=', props)current.value = props.current
</script><template><view class="tabbar"><!-- 根据tabbar个数的多少, 调整.tabbar-item样式中的padding即可 --><view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="changeTab(index)"><view class="select" v-if="current == index"><view class="i-t"><image class="img imgactive" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image><image class="img" mode="widthFix" :src="item.iconPath" v-else></image><view class="text active" v-if="current == index">{{item.text}}</view><view class="text" v-else>{{item.text}}</view></view></view><view v-else><image class="img" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image><image class="img" mode="widthFix" :src="item.iconPath" v-else></image><view class="text active" v-if="current == index">{{item.text}}</view><view class="text" v-else>{{item.text}}</view></view></view></view>
</template><style>.tabbar {/* 1.5vh: 视口高度的1.5% */font-size: 1.5vh;position: fixed;left: 0;bottom: 0;z-index: 99;width: 100%;/* 6vh: 视口高度的6% */height: 6vh;display: flex;align-items: center;justify-content: space-around;background-color: #fff;padding: 20rpx 0;}.tabbar-item {height: 100%;padding: 0 20rpx;/* 根据tabbar个数的多少, 调整.tabbar-item样式中的padding即可 */display: flex;align-items: center;justify-content: center;}.select, {width: 10vh;height: 10vh;/* border-radius: 10vh; *//* margin-bottom: 4vh; *//* background-color: #086d5b; */position: relative;},.i-t {font-size: 1.5vh;padding: 2vw 2vh;position: absolute;bottom: 1vh;}.img ,{height: 3vh;width: 2.5vh;/* 4vw: 视口宽度的4% */margin: 0 4vw;},.imgactive, {height: 3.5vh;width: 3.2vh;margin: 0 2.2vw;}.text {,text-align: center;color: #CACACA;},.text, .active {color: #fff;}
</style>

其次 - pages.json


{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "index"}}, {"path": "pages/warn/index","style": {"navigationBarTitleText": "告警","enablePullDownRefresh": false}}, {"path": "pages/my/index","style": {"navigationBarTitleText": "我的","enablePullDownRefresh": false}}, {"path": "pages/user/index","style": {"navigationBarTitleText": "其他","enablePullDownRefresh": false}}, {"path": "pages/sign/index","style": {"navigationBarTitleText": "标签","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},// 主要是这里的：tabbar -------------------------------------------------------"tabBar": {"height": "0",// "color": "#7A7E83",// "selectedColor": "#55ffff",// "backgroundColor": "#55ff7f","list": [{"pagePath": "pages/index/index"},{"pagePath": "pages/warn/index"},{"pagePath": "pages/my/index"},{"pagePath": "pages/user/index"},{"pagePath": "pages/sign/index"}]},"uniIdRouter": {}}

再然后 - 在别的.vue组件中这样使用

BaseApp\pages\my.vue


<template><text class="title">{{title}}</text><tabbar :current='2'></tabbar>
</template><script setup>import {ref} from 'vue'import tabbar from '../../components/Tabbar.vue'let title = ref('我的')
</script><style></style>