uniapp实现自定义底部tab栏

1、自定义底部导航组件接收一个tabs数组作为参数,每个数组项包含icontext字段,用于表示每个底部标签的图标和文本。通过遍历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>

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>
相关推荐
reembarkation6 分钟前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
KenXu22 分钟前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|30 分钟前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青31 分钟前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥32 分钟前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb39 分钟前
【Python】字符串
java·前端·python
阿笑带你学前端1 小时前
Supabase云同步架构:Flutter应用的数据同步策略
前端
梦想CAD控件1 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
万少1 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
掘金约基奇_1 小时前
JS-SDK开发企微侧边栏
前端·javascript