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>
相关推荐
遂心_1 分钟前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233311 分钟前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin14 分钟前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_36 分钟前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit38 分钟前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天43 分钟前
ts中的函数重载
前端
卓伊凡1 小时前
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
前端
前端Hardy1 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼1 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js