uniapp小程序自定义中间凸起样式底部tabbar
我自己写的自定义的tabbar效果图
废话少说咱们直接上代码，一步一步来
第一步：
找到根目录下的 pages.json 文件，在 tabBar 中把 custom 设置为 true，默认值是 false。list 中设置自定义的相关信息，
pagePath： 页面路径；
iconPath： 点击前显示的图片；
selectedIconPath： 点击后显示的图片；
text： 底部导航的名称。
第二步
在根目录下创建 components 文件夹用来存放自定义tabBar组件，小伙伴们可以自定义文件夹和文件的名称。记得命名要规范哦！！！
第三步
咱也不截图了，看了那么多的文章全他妈截图，咱直接上代码方便有需要的小伙伴使用！！！！
<template>
<view class="tabbar-container flex items-center">
<!-- isRound是中间凸出样式的标志，用来判断当前子级是否是凸出样式的 -->
<view :class="!item.isRound ? 'square' : 'is-square'" v-for="(item, index) in tabbarList" :key="index" @click="tabbarChange(index, item)">
<!-- 不是凸出的子级 -->
<template v-if="!item.isRound">
<view class="item-top flex justify-center flex-col">
<u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
:height="item.height"></u-image>
</view>
<view class="item-bottom" :class="{'active': active === index}">
<text>{{ item.text }}</text>
</view>
</template>
<!-- 凸出的子级 -->
<template v-else>
<view class="flex flex-col justify-center items-center center-round">
<view class="flex flex-col justify-center items-center">
<u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
:height="item.height"></u-image>
<text :class="{'round-active': active === index}">{{ item.text }}</text>
</view>
</view>
</template>
</view>
</view>
</template>
<script>
export default {
name: 'Tabbar',
props: {
tabbarIndex: {
type: Number,
default: 0
}
},
data() {
return {
// tabbar列表，配置自定义用到的属性字段
tabbarList: [{
pagePath: "/pages/homePage/index",
iconPath: "/static/images/tabbar/index.png",
selectedIconPath: "/static/images/tabbar/index-selected.png",
text: "首页",
width: '45rpx',
height: '41rpx',
isRound: false
},
{
pagePath: "/pages/information/index",
iconPath: "/static/images/tabbar/data.png",
selectedIconPath: "/static/images/tabbar/data-selected.png",
text: "数据",
width: '44rpx',
height: '43rpx',
isRound: false
},
{
pagePath: "/pages/aiRecommend/index",
iconPath: "/static/images/tabbar/ai-recommend.png",
selectedIconPath: "/static/images/tabbar/ai-recommend.png",
text: "智能推荐",
width: '120rpx',
height: '120rpx',
isRound: true
},
{
pagePath: "/pages/vip/index",
iconPath: "/static/images/tabbar/vip.png",
selectedIconPath: "/static/images/tabbar/vip-selected.png",
text: "会员",
width: '39rpx',
height: '37rpx',
isRound: false
},
{
pagePath: "/pages/center/index",
iconPath: "/static/images/tabbar/center.png",
selectedIconPath: "/static/images/tabbar/center-selected.png",
text: "我的",
width: '40rpx',
height: '41rpx',
isRound: false
},
],
active: 0,
isRound: false,
}
},
mounted() {
this.active = this.tabbarIndex
},
methods: {
tabbarChange(index, item) {
this.$emit('updateTabbar', index)
uni.switchTab({
url: item.pagePath
});
}
}
}
</script>
<style lang="scss" scoped>
.tabbar-container {
width: 100%;
height: 132rpx;
position: fixed;
bottom: 0;
.square {
width: 100%;
height: 130rpx;
background: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.round-active {
color: #207BDB;
}
}
.square .item-top {
width: 45rpx;
height: 45rpx;
}
.is-square {
width: 100%;
height: 130rpx;
background: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.round-active {
color: #207BDB;
}
}
.center-round {
width: 203rpx;
height: 130rpx;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMsAAAAlCAYAAADstR3BAAADx0lEQVR4nO3deajnUxjH8dc1Y2zDzFjGvkZkKcofpNGgTCl/oGRfyto0iJJQypa1KJT9H7KUJYSsDRFlGqQUyi4kDVe2y1wdnqmZ3HSv+1vOOd/zrl/3d3/3j/s8p+/n9zzPOc85Z2R8fFxjIGyHvbEXdsC28dkcrIeNMAM/4s8waDbWxk/4HSvwDT7HZ3gfb+O9+HujjzSx9IcR7IGDsRAHYpM+/r8xvIOleAmvhMAaPaSJpXekqHAAjsCRETWGxW94EY/hcXxXwfgOnSaW6bMbTsGJ2CpD+1LUeRr3xs+xDGwqkiaW/8eMiCDnYEFBdn+Le3ArvsjAnqJoYpkaqeA+M0QyzDRruoxFinYdlhXsx0BpYpkcacZqCc7rc6E+DFJqdgXeqMyvntPE8t/MDpFciLk5G9oDnsXFWF68J32iiWVi1oqi/UpsmaOBfWIlHsJFsY7TWI0mln+zfxTA++Rm2AD5BVfjxnjfeTSxrMH8eDiOj0XFBp/EZMaTbSz+STe6zkikXKl15IQmlDVIbTlP4OGOpaMT0vXIkh6Gu3BIBrbkTupLuyDWaTpJVyNLih5n4N0mlEmTZgPvxlNdjTJdjCzzo/XjsAxsKZXvcToe7ZLTXYssi6I7twllemyMR3A71i/ZkanQFbHMxDV4BltkYE8tpFT2LezZBWe7kIZtjQcKa3gsjZ9DOPfX7GTtkWVBtG80ofSXlIrdh9tiZ2eV1CyWVIC+gM0ysKUrnI3nKmw2/ZsaxZL2mtyEOzArA3u6RtpG/WZsq66K2mqWeXgQh2ZgS9cZxXGxLlMFNUWWnWJPRhNKHmwY+//Pr8WhWiJLmrp8vk0LZ8u10fZfNDWIZVe82gr57LkKl5bsQOlp2FF4rQmlCC6JdZg5pTpQamRJ+fDNODUDWxpT41OcFAcBFkWJkWVRdAs3oZTJ9ng5vuw2KMmDkiLLprgBJ2dgS6M3fIzF0bOXPSVEllmx6ejDJpTq2DGOYkpi2T1353KOLGmD1jG4HDtnYE+jv/wRXReX5Xo2c65iOShOF9kvA1sagyVduXF91DSjOY19TmJZB8fi3LjHpNFtVsSRVLfg6xxGIgexpP0mp+GstgLfmIBV5zLfGXfPrBzWIA1LLNvgcBwdF/20I5kak+GrOJYpief1qHMGxqDEkmY99o1NWAvjqrhGYzr8EOs1S0M4ae3t136OaBLLvNV+H52iWufGavqqVzrIYPO4LzEJZJdocqz9UO3G8EnP7Qfx+iju3fwyZtbSc51qoDR5kN6nm9EmS3quZ2LdvwC4r+EYTWev0AAAAABJRU5ErkJggg==');
background-position: center top;
background-size: 100% 37rpx;
background-repeat: no-repeat;
position: absolute;
margin-top: -72rpx;
text {
font-weight: 500;
font-size: 20rpx;
color: #555B66;
position: absolute;
top: 117rpx;
}
}
.item-bottom {
font-weight: 500;
font-size: 20rpx;
color: #555B66;
margin-top: 14rpx;
}
.active {
color: #207BDB;
}
}
</style>
注意：小程序背景图无法使用本地图片，要么转成base64，要么把图片存到服务器上，然后调用接口把图片路径返回。推荐第二种方法。
我写的有点繁琐，中间凸起的样式应该为一整块，可是ui只给了顶部的白色图片导致写的代码有点多。不过大体的思路差不多都是这样，小伙伴们也可以参考其他博主写的文章的思路去编写自定义组件。
这是我用到的图片，小伙伴们可以下载下来配合代码进行使用。
第四步
在需要的页面中引用自定义组件
<template>
<Tabbar :tabbar-index="tabbarIndex" @updateTabbar="updateTabbar"></Tabbar>
</template>
<script>
import Tabbar from "@/components/tabbar/tabbar.vue"
components: { Tabbar },
data() {
return {
tabbarIndex: 4,
}
},
methods: {
updateTabbar(e) {
this.tabbarIndex = e
},
}
</script>
有需求的小伙伴们可以试试，我写的并不是很完美但是大体的思路是这样的，小伙伴们可以根据自己项目的需求进行改动。此文章可作为参考使用，希望能帮到有需求的小伙伴！！！！
如果有用的话就点击收藏起来吧！！！