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>
相关推荐
一个水瓶座程序猿.3 分钟前
ES6数组的`flat()`和`flatMap()`函数用法
前端·ecmascript·es6
袁煦丞18 分钟前
AI直接出答案!Perplexica开源搜索引擎:cpolar内网穿透实验室第534个成功挑战
前端·程序员·远程工作
Hilaku20 分钟前
用“人话”讲明白10个最常用的正则表达式
前端·javascript·正则表达式
木叶丸29 分钟前
跨平台方案该如何选择?
android·前端·ios
LL.。32 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴37 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
运维咖啡吧38 分钟前
周一才上线的网站,单单今天已经超过1000访问了
前端·程序员·ai编程
Little_Code40 分钟前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
世界哪有真情41 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界41 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端