uniApp开辟小步调自界说tabBar底部导航栏+tabBar中心凸起自界说样式实现

        先看效果是否可以满意你们，假如可以满意你只要一步一步照着做绝对没有错。
        本人技能不佳，研究了一整天，全网的大佬们写的博客看的晕头转向，克制大伙再走弯路，跟着我以下步调一点一点来绝对可以实现。
        终极效果图： （假如你看着还满意的话那就跟着教程一步一步来吧）

起首你要确保你的项目中安装了 uview的UI框架和vuex，具体安装教程这两个网上都有具体教程，我这项目是Vue3.0的，用的是uview-plus框架。
第一步：设置信息

pages.js 添加 "custom": true 属性

第二步：添加自界说tabBar代码文件

留意：这里是按官方要求必须放在项目根目次下，而且文件名不能修改，index中代码如下：

2. <template>
3.         <view>
4.                 <u-tabbar :value="index" @change="tabBarChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
5.                         activeColor="#d81e06">
6.                         <u-tabbar-item text="首页">
7.                                 <template #active-icon>
8.                                         <image class="u-page__item__slot-icon" :src="list[0].selectedIconPath"></image>
9.                                 </template>
10.                                 <template #inactive-icon>
11.                                         <image class="u-page__item__slot-icon" :src="list[0].iconPath"></image>
12.                                 </template>
13.                         </u-tabbar-item>
15.                         <u-tabbar-item text="转让">
16.                                 <template #active-icon>
17.                                         <image class="u-page__item__slot-icon" :src="list[1].selectedIconPath"></image>
18.                                 </template>
19.                                 <template #inactive-icon>
20.                                         <image class="u-page__item__slot-icon" :src="list[1].iconPath"></image>
21.                                 </template>
22.                         </u-tabbar-item>
24.                         <u-tabbar-item @click="show = true">
25.                                 <template #active-icon>
26.                                         <image class="u-page__item__slot-icon-big" :src="list[2].selectedIconPath">
27.                                         </image>
28.                                 </template>
29.                                 <template #inactive-icon>
30.                                         <image class="u-page__item__slot-icon-big" :src="list[2].iconPath"></image>
31.                                 </template>
32.                         </u-tabbar-item>
34.                         <u-tabbar-item text="积分">
35.                                 <template #active-icon>
36.                                         <image class="u-page__item__slot-icon" :src="list[3].selectedIconPath"></image>
37.                                 </template>
38.                                 <template #inactive-icon>
39.                                         <image class="u-page__item__slot-icon" :src="list[3].iconPath"></image>
40.                                 </template>
41.                         </u-tabbar-item>
43.                         <u-tabbar-item text="我的">
44.                                 <template #active-icon>
45.                                         <image class="u-page__item__slot-icon" :src="list[4].selectedIconPath"></image>
46.                                 </template>
47.                                 <template #inactive-icon>
48.                                         <image class="u-page__item__slot-icon" :src="list[4].iconPath"></image>
49.                                 </template>
50.                         </u-tabbar-item>
51.                 </u-tabbar>
52.                 <view>
53.                         <u-popup :overlayOpacity="0.6" :round="10" :show="show" @close="close" @open="open">
54.                                 <view class="issue-item">
55.                                         <view class="issue-item-buy" @click="toBuy">
56.                                                 <text>我要卖</text>
57.                                         </view>
58.                                         <view class="issue-item-sell">
59.                                                 <text>我要买</text>
60.                                         </view>
61.                                 </view>
62.                         </u-popup>
63.                 </view>
64.         </view>
65. </template>
67. <script>
68.         export default {
69.                 data() {
70.                         return {
71.                                 show: false,
72.                                 list: [{
73.                                                 "pagePath": "/pages/index/index",
74.                                                 "text": "首页",
75.                                                 "iconPath": "/static/tabs/home_default.png",
76.                                                 "selectedIconPath": "/static/tabs/home_selected.png"
77.                                         },
78.                                         {
79.                                                 "pagePath": "/pages/makeOver/makeOver",
80.                                                 "text": "转让",
81.                                                 "iconPath": "/static/tabs/mass_default.png",
82.                                                 "selectedIconPath": "/static/tabs/mass_selected.png"
83.                                         },
84.                                         {
85.                                                 "pagePath": "/pages/issue/issue",
86.                                                 "text": "发布",
87.                                                 "iconPath": "/static/images/tab_issue.png",
88.                                                 "selectedIconPath": "/static/images/tab_issue.png"
89.                                         },
90.                                         {
91.                                                 "pagePath": "/pages/integral/integral",
92.                                                 "text": "积分",
93.                                                 "iconPath": "/static/tabs/mass_default.png",
94.                                                 "selectedIconPath": "/static/tabs/mass_selected.png"
95.                                         },
96.                                         {
97.                                                 "pagePath": "/pages/my/my",
98.                                                 "text": "我的",
99.                                                 "iconPath": "/static/tabs/my_default.png",
100.                                                 "selectedIconPath": "/static/tabs/my_selected.png"
101.                                         }
102.                                 ]
103.                         }
104.                 },
105.                 computed: {
106.                         index() {
107.                                 return this.$store.state.tabbarIndex
108.                         }
109.                 },
110.                 methods: {
111.                         tabBarChange(e) {
112.                                 if (e !== 2) {
113.                                         uni.switchTab({
114.                                                 url: this.list[e].pagePath
115.                                         })
116.                                 }
117.                         },
118.                         //点击发布按钮的弹出层
119.                         open() {
120.                                 console.log('open');
121.                         },
122.                         close() {
123.                                 this.show = false;
124.                                 console.log('close');
125.                         },
126.                         //点击我要卖
127.                         toBuy() {
128.                                 console.log("点击了");
129.                                 uni.switchTab({
130.                                         url: '/pages/issue/issue'
131.                                 })
132.                         }
133.                 }
134.         }
135. </script>
137. <style lang="scss">
138.         .u-page__item__slot-icon {
139.                 width: 50rpx;
140.                 height: 50rpx;
141.         }
143.         .u-page__item__slot-icon-big {
144.                 width: 120rpx;
145.                 height: 120rpx;
146.                 margin-bottom: 30rpx;
147.         }
149.         .issue-item {
150.                 height: 400rpx;
151.                 display: flex;
152.                 justify-content: center;
153.                 align-items: center;
155.                 .issue-item-buy,
156.                 .issue-item-sell {
157.                         width: 30%;
158.                         height: 100rpx;
159.                         font-size: 28rpx;
160.                         border-radius: 20rpx;
161.                         background-color: pink;
162.                         margin: 40rpx;
163.                         line-height: 100rpx;
164.                         text-align: center;
165.                 }
166.         }
167. </style>

复制代码

 下面我给各人先讲讲实现的逻辑，起首逛了一天的博客，有的人用for循环来做，刚开始我也用循环，但是我中心有个凸起的发布按钮，我想做出点击后有弹出层，然后再选择的功能，按照网上他们说的去做都直接跳转了，我这点击发布效果如下图：  没办法我只能我只有会写死，反正反面这个换的也不是太频仍。

我再讲讲代码中必要留意的点吧，起首 如下图的value值我绑定的computed盘算属性中的index，然后methods中的tabBarChange方法呢是点击tabBar切换的每一项，下面我又加个if判断就是用来控制中心发布的谁人图标点击后不跳转

 

 以上设置好后，那就在每一个跳转页配一下代码，作用是用来更store中的changgeTabbarIndex的值，也就是确保页面跳转后，图标选中你所点击的谁人页面，我这里每个页面都设置了一下。代码如下：

2.                 onShow() {
3.                         this.$store.commit('changeTabbarIndex', 1)
4.                 },

复制代码

第三步：安装设置vuex

 起首说为什么要安装vuex，由于通过vuex来实现组件和组件之间数据通报，当你点击差别tabBar来回切换的时间把对应的值存在store中。
安装下令：npm install vuex --save
设置vuex：项目根目次下新建 store/index.js文件，代码如下：

2. import {
3.         createStore
4. } from 'vuex'
6. const store = createStore({
7.         //全局状态
8.         state: {
9.                 tabbarIndex: 0,
10.         },
11.         //同步的方法，commit
12.         mutations: {
13.                 changeTabbarIndex(state, index) {
14.                         state.tabbarIndex = index;
15.                         console.log('uvexIndex',state.tabbarIndex);
16.                 }
17.         },
18.         //异步的方法 dispatch
19.         actions: {
21.         }
22. })
24. export default store

复制代码

第四步：设置主入口文件

 到这里就已经完成了，这是本人第一个小步调项目，盼望能给新手们带来点资助，欢迎大佬们前来品评指正。