uniapp小步伐自界说中心凸起样式底部tabbar

我自己写的自界说的tabbar结果图

废话少说咱们直接上代码，一步一步来
第一步：

找到根目次下的 pages.json 文件，在 tabBar 中把 custom 设置为 true，默认值是 false。list 中设置自界说的相关信息，
pagePath： 页面路径；
iconPath： 点击前显示的图片；
selectedIconPath： 点击后显示的图片；
text： 底部导航的名称。

第二步

在根目次下创建 components 文件夹用来存放自界说tabBar组件，小伙伴们可以自界说文件夹和文件的名称。记得命名要规范哦！！！

第三步

咱也不截图了，看了那么多的文章全他妈截图，咱直接上代码方便有必要的小伙伴利用！！！！

1. <template>
2.         <view class="tabbar-container flex items-center">
3.                 <!-- isRound是中间凸出样式的标志，用来判断当前子级是否是凸出样式的 -->
4.                 <view :class="!item.isRound ? 'square' : 'is-square'" v-for="(item, index) in tabbarList" :key="index" @click="tabbarChange(index, item)">
5.                         <!-- 不是凸出的子级 -->
6.                         <template v-if="!item.isRound">
7.                                 <view class="item-top flex justify-center flex-col">
8.                                         <u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
9.                                                 :height="item.height"></u-image>
10.                                 </view>
11.                                 <view class="item-bottom" :class="{'active': active === index}">
12.                                         <text>{{ item.text }}</text>
13.                                 </view>
14.                         </template>
15.                         <!-- 凸出的子级 -->
16.                         <template v-else>
17.                                 <view class="flex flex-col justify-center items-center center-round">
18.                                         <view class="flex flex-col justify-center items-center">
19.                                                 <u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
20.                                                         :height="item.height"></u-image>
21.                                                 <text :class="{'round-active': active === index}">{{ item.text }}</text>
22.                                         </view>
23.                                 </view>
24.                         </template>
25.                 </view>
26.         </view>
27. </template>
28. <script>
29.         export default {
30.                 name: 'Tabbar',
31.                 props: {
32.                         tabbarIndex: {
33.                                 type: Number,
34.                                 default: 0
35.                         }
36.                 },
37.                 data() {
38.                         return {
39.                                 // tabbar列表，配置自定义用到的属性字段
40.                                 tabbarList: [{
41.                                                 pagePath: "/pages/homePage/index",
42.                                                 iconPath: "/static/images/tabbar/index.png",
43.                                                 selectedIconPath: "/static/images/tabbar/index-selected.png",
44.                                                 text: "首页",
45.                                                 width: '45rpx',
46.                                                 height: '41rpx',
47.                                                 isRound: false
48.                                         },
49.                                         {
50.                                                 pagePath: "/pages/information/index",
51.                                                 iconPath: "/static/images/tabbar/data.png",
52.                                                 selectedIconPath: "/static/images/tabbar/data-selected.png",
53.                                                 text: "数据",
54.                                                 width: '44rpx',
55.                                                 height: '43rpx',
56.                                                 isRound: false
57.                                         },
58.                                         {
59.                                                 pagePath: "/pages/aiRecommend/index",
60.                                                 iconPath: "/static/images/tabbar/ai-recommend.png",
61.                                                 selectedIconPath: "/static/images/tabbar/ai-recommend.png",
62.                                                 text: "智能推荐",
63.                                                 width: '120rpx',
64.                                                 height: '120rpx',
65.                                                 isRound: true
66.                                         },
67.                                         {
68.                                                 pagePath: "/pages/vip/index",
69.                                                 iconPath: "/static/images/tabbar/vip.png",
70.                                                 selectedIconPath: "/static/images/tabbar/vip-selected.png",
71.                                                 text: "会员",
72.                                                 width: '39rpx',
73.                                                 height: '37rpx',
74.                                                 isRound: false
75.                                         },
76.                                         {
77.                                                 pagePath: "/pages/center/index",
78.                                                 iconPath: "/static/images/tabbar/center.png",
79.                                                 selectedIconPath: "/static/images/tabbar/center-selected.png",
80.                                                 text: "我的",
81.                                                 width: '40rpx',
82.                                                 height: '41rpx',
83.                                                 isRound: false
84.                                         },
85.                                 ],
86.                                 active: 0,
87.                                 isRound: false,
88.                         }
89.                 },
90.                 mounted() {
91.                         this.active = this.tabbarIndex
92.                 },
93.                 methods: {
94.                         tabbarChange(index, item) {
95.                                 this.$emit('updateTabbar', index)
96.                                 uni.switchTab({
97.                                         url: item.pagePath
98.                                 });
99.                         }
100.                 }
101.         }
102. </script>
104. <style lang="scss" scoped>
105.         .tabbar-container {
106.                 width: 100%;
107.                 height: 132rpx;
108.                 position: fixed;
109.                 bottom: 0;
110.                 .square {
111.                         width: 100%;
112.                         height: 130rpx;
113.                         background: #FFFFFF;
114.                         display: flex;
115.                         flex-direction: column;
116.                         align-items: center;
117.                         justify-content: center;
118.                         .round-active {
119.                                 color: #207BDB;
120.                         }
121.                 }
122.                 .square .item-top {
123.                         width: 45rpx;
124.                         height: 45rpx;
125.                 }
126.                 .is-square {
127.                         width: 100%;
128.                         height: 130rpx;
129.                         background: #FFFFFF;
130.                         display: flex;
131.                         flex-direction: column;
132.                         align-items: center;
133.                         justify-content: center;
134.                         .round-active {
135.                                 color: #207BDB;
136.                         }
137.                 }
138.                 .center-round {
139.                         width: 203rpx;
140.                         height: 130rpx;
141.                         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==');
142.                         background-position: center top;
143.                         background-size: 100% 37rpx;
144.                         background-repeat: no-repeat;
145.                         position: absolute;
146.                         margin-top: -72rpx;
148.                         text {
149.                                 font-weight: 500;
150.                                 font-size: 20rpx;
151.                                 color: #555B66;
152.                                 position: absolute;
153.                                 top: 117rpx;
154.                         }
155.                 }
157.                 .item-bottom {
158.                         font-weight: 500;
159.                         font-size: 20rpx;
160.                         color: #555B66;
161.                         margin-top: 14rpx;
162.                 }
164.                 .active {
165.                         color: #207BDB;
166.                 }
167.         }
168. </style>

复制代码

  留意：小步伐背景图无法利用当地图片，要么转成base64，要么把图片存到服务器上，然后调用接口把图片路径返回。推荐第二种方法。
  我写的有点繁琐，中心凸起的样式应该为一整块，可是ui只给了顶部的白色图片导致写的代码有点多。不外大要的思绪差不多都是这样，小伙伴们也可以参考其他博主写的文章的思绪去编写自界说组件。

这是我用到的图片，小伙伴们可以下载下来共同代码进行利用。

第四步

在必要的页面中引用自界说组件

1. <template>
2.         <Tabbar :tabbar-index="tabbarIndex" @updateTabbar="updateTabbar"></Tabbar>
3. </template>
4. <script>
5.         import Tabbar from "@/components/tabbar/tabbar.vue"
6.         components: { Tabbar },
7.         data() {
8.                 return {
9.                         tabbarIndex: 4,
10.                 }
11.         },
12.         methods: {
13.                 updateTabbar(e) {
14.                         this.tabbarIndex = e
15.                 },
16.         }
17. </script>

复制代码

有需求的小伙伴们可以试试，我写的并不是很完美但是大要的思绪是这样的，小伙伴们可以根据自己项目的需求进行改动。此文章可作为参考利用，希望能帮到有需求的小伙伴！！！！
假如有效的话就点击收藏起来吧！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。