uniapp实现自定义底部tab栏_uniapp自定义底部tabbar

1、自定义底部导航组件接收一个tabs数组作为参数，每个数组项包含icon和text字段，用于表示每个底部标签的图标和文本。通过遍历tabs数组，渲染每个底部标签项的图标和文本。activeIndex表示当前选中的底部标签的索引。点击底部标签时，调用switchTab方法切换底部导航，并通过$emit触发switchTab事件，将选中的标签索引传递给父组件。

<template>  
     <view class="custom-tab-bar">  
       <view class="tab-bar-item" v-for="(item, index) in tabs" :key="index" :class="{ active: activeIndex === index }" @click="switchTab(index)">  
         <!-- 图标 -->  
         <image :src="item.icon" class="tab-bar-icon"></image>  
         <!-- 文字 -->  
         <text>{{ item.text }}</text>  
       </view>  
     </view>  
   </template>  
     
   <script>  
   export default {  
     props: {  
       tabs: {  
         type: Array,  
         default: () => []  
       },  
       activeIndex: {  
         type: Number,  
         default: 0  
       }  
     },  
     methods: {  
       switchTab(index) {  
         // 切换底部导航  
         this.$emit("switchTab", index);  
       }  
     }  
   };  
   </script>  
     
   <style scoped>  
   .custom-tab-bar {  
     display: flex;  
     justify-content: space-around;  
     align-items: center;  
     height: 50px;  
     background-color: #fff;  
   }  
     
   .custom-tab-bar .tab-bar-item {  
     display: flex;  
     flex-direction: column;  
     align-items: center;  
     font-size: 12px;  
   }  
     
   .custom-tab-bar .tab-bar-item.active {  
     color: #007aff;  
   }  
     
   .custom-tab-bar .tab-bar-icon {  
     width: 24px;  
     height: 24px;  
     margin-bottom: 4px;  
   }  
   </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

2、在需要显示自定义底部导航的页面中，引入和使用自定义底部导航组件。例如，在pages文件夹下的home页面中，可以添加以下代码:

<template>  
     <view>  
       <!-- 页面内容... -->  
     </view>  
     <!-- 引入自定义底部导航 -->  
     <custom-tab-bar :tabs="tabs" :activeIndex="activeTab" @switchTab="switchTab"></custom-tab-bar>  
   </template>  
     
   <script>  
   import CustomTabBar from "@/components/CustomTabBar";  
   export default {  
     components: {  
       CustomTabBar  
     },  
     data() {  
       return {  
         tabs: [  
           { icon: "icon-home", text: "首页" },  
           { icon: "icon-category", text: "分类" },  
           { icon: "icon-cart", text: "购物车" },  
           { icon: "icon-mine", text: "我的" }  
         ],  
         activeTab: 0  
       };  
     },  
     methods: {  
       switchTab(index) {  
         // 切换底部导航  
         this.activeTab = index;  
         // 根据索引进行相应的页面切换或逻辑处理  
         // ...  
       }  
     }  
   };  
   </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35