详细先容uniapp小程序自定义底部tabbar样式的方法

uniapp自带的tabbar组件可以方便地实现底部导航栏的功能，原生tabBar是相对固定的配置方式，但是默认的样式可能无法满足我们的需求，以是我们必要自定义设置tabbar样式。下面我会详细先容uniapp自定义tabbar样式的方法。
一、pages.json代码

pages.json这里只配置页面路径就可以。

1. "tabBar": {
2.                
3.                 "color": "#7A7E83",
4.                 "selectedColor": "#086d5b",
5.                 "backgroundColor": "#ffffff",
6.                 "list": [
7.                         {
8.                                 "pagePath": "pages/xxx/xxx"
9.                         },
10.                         {
11.                                 "pagePath": "pages/xxx/xxx"
12.                         },
13.                         {
14.                                 "pagePath": "pages/xxx/xxx"
15.                         }
16.                 ]
17.                
18.         },

复制代码

二、创建一个tabBar.vue组件
在uniapp项目标components目录下创建一个名为tabbar的组件，该组件包含了tabbar的整体布局和动态切换结果。
tabbar.vue组件HTML部分代码如下：

1. <template>
2.         <view class="tabbar" >
3.             <view class="tabbar-item" v-for="(item,index) in list" :key="index"         
4.          @click="changeTab(index)">
5.                         <view class="select"  v-if="current == index">
6.                                 <view class="i-t position">
7.                                         <image class="img imgactive" mode="widthFix"
8.                         :src="item.selectedIconPath" v-if="current == index"></image>
9.                                         <image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
10.                                         <view class="text active" v-if="current == index">{{item.text}}</view>
11.                                         <view class="text" v-else>{{item.text}}</view>
12.                                 </view>
13.                         </view>
14.                         <view v-else>
15.                                 <image class="img" mode="widthFix" :src="item.selectedIconPath"
16.                     v-if="current == index"></image>
17.                                 <image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
18.                                 <view class="text active" v-if="current == index">{{item.text}}</view>
19.                                 <view class="text" v-else>{{item.text}}</view>
20.                         </view>
21.             </view>
22.           </view>
23. </template>

复制代码

tabbar.vue组件JS部分代码如下：

1. <script>
2.     export default {
3.    
4.         name:"tabbar",
5.                 props: ['current'],
6.         data() {
7.                         return {
8.                 list:  [
9.                                           {
10.                                                   pagePath: "页面路径",
11.                                                   iconPath: "图标路径",
12.                                                   selectedIconPath: "选中的图标路径",
13.                                                   text: "文字"
14.                                           },
15.                                           {
16.                                                   pagePath: "页面路径",
17.                                                   iconPath: "图标路径",
18.                                                   selectedIconPath: "选中的图标路径",
19.                                                   text: "文字"
20.                                           },
21.                                           {
22.                                                   pagePath: "页面路径",
23.                                                   iconPath: "图标路径",
24.                                                   selectedIconPath: "选中的图标路径",
25.                                                   text: "文字"
26.                                           }
27.                                         ]
29.             }
30.         },
32.         created() {
33.                       uni.hideTabBar()
34.                     },
35.                        
36.                  methods: {
37.                       changeTab(e) {
38.                         uni.switchTab({
39.                           url: '/' + this.list[e].pagePath,
40.                         })
41.                       }
42.                     }
45. }
47. </script>

复制代码

tabbar.vue组件CSS部分代码如下：

1. <style>
2. .tabbar {
3.         font-size: 1.5vh;
4.     position: fixed;
5.     left: 0;
6.     bottom: 0;
7.     z-index: 99;
8.     width: 100%;
9.     height: 6vh;
10.     display: flex;
11.     align-items: center;
12.     justify-content: space-around;
13.         background-color: #fff;
14.     padding: 20rpx 0;
15.   },
16.   .tabbar-item {
17.         height: 100%;
18.     padding: 0 40rpx;
19.         display: flex;
20.         align-items: center;
21.         justify-content: center;
22.   }
23.   .img {
24.     height: 3vh;
25.     width: 2.5vh;
26.         margin: 0 4vw;
27.   }
28.   .text {
29.         text-align: center;
30.     color: #CACACA;
31.   }
32.   .i-t{
33.           font-size: 1.5vh;
34.           padding:2vw 2vh;
35.           position: absolute;
36.           bottom: 1vh;
37.   }
38.   .select{
39.         width: 10vh;
40.         height:10vh;
41.         border-radius: 10vh;
42.         background-color: #086d5b;
43.         margin-bottom: 4vh;
44.         position: relative;
45.   }
46.   .imgactive{
47.          height: 3.5vh;
48.          width: 3.2vh;
49.          margin: 0 2.2vw;
50.   }
51.   .text.active {
52.     color: #fff;
53.   }
54. </style>

复制代码

css部分样式可以根据项目必要自行修改

三、在必要显示tabbar的页面中引入tabbar组件

1. <template>
2.         <view>
3.                 <tabbar current="0"></tabbar>
4.         </view>
5. </template>
7. <script>
8.         import tabbar from '@/components/tabbar/tabbar.vue'
9.         export default {
10.                 components:{
11.                   tabbar
12.                 }
13.         }
14. </script>

复制代码

以上就是uniapp小程序自定义底部tabbar样式的方法的详细内容啦·~

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