uni-app关于tabBar配置

LW0512

已于 2022-09-26 11:24:12 修改

阅读量1.4w

点赞数 8

分类专栏：前端基础文章标签： uniapp

于 2022-05-20 14:05:38 首次发布

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/124881825

版权

前端基础专栏收录该内容

4 篇文章

订阅专栏

本文介绍了uni-app中实现tabBar的两种方法，包括在pages中创建页面、配置页面路由、在home页引入tabBar以及在pages.json中定制底部栏的大小和颜色。提供了详细步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni-app关于tabBar配置

这里有两种方法，都能实现，可以参考，有疑问可以提出！共同学习！！！

第一种方法

使用步骤

1，在pages中创建三个tabba页面，并在页面添加一些要显示出来的东西

在这里插入图片描述

2，在pages.json文件里面配置文件页面路由

在这里插入图片描述

正常的话这三个tabbar页面也需要在tabBar 中的 list 是一个数组，最少2个、最多5个，但在这里暂时不需要

3，先在home页引入底部tabbar导航

import tablebox from '../../../components/tablebox.vue';

tablebox.vue

<template>
 <view class="tableboxpage">
   <view class="footerShells">
     <view v-for="(item, index) in list" :key="index" :class="{ Selection: flag == item.id }" @tap="Jump(item)">
       <image v-if="flag == item.id" style="width: 40rpx; height: 40rpx" :src="item.image1" />
       <image v-else style="width: 40rpx; height: 40rpx" :src="item.image2" />
       <view class="footText">{{ item.name }}</view>
     </view>
   </view>
 </view>
</template>

<script>
export default {
 props: {
   flag: {
     type: [Number, String],
     default: 1,
   },
 },
 data() {
   return {
     list: [
       {
         id: '1',
         url: '../tabbar/home/home',
         name: '首页',
         image1: '../static/home2.png',
         image2: '../static/home1.png',
       },
     ],
   };
 },
 methods: {
   Jump(item) {
     uni.reLaunch({
       url: item.url,
     });
   },
 },
 mounted() {
   this.list = [];
   let arr = [];
   arr = [
     {
       id: '1',
       url: '/pages/tabbar/home/home',
       name: '首页',
       image1: '../static/home2.png',
       image2: '../static/home1.png',
     },
     {
       id: '2',
       url: '/pages/tabbar/newtric/newtric',
       name: '废水',
       image1: '../static/newtric2.png',
       image2: '../static/newtric1.png',
     },
     {
       id: '3',
       url: '/pages/tabbar/profit/profit',
       name: '废气',
       image1: '../static/profit2.png',
       image2: '../static/profit1.png',
     },
   ];
   this.list = arr;
 },
};
</script>

<style>
.tableboxpage {
 height: 100upx;
 flex: none;
}
.footerShells {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 98rpx;
 background: #fff;
 display: flex;
 flex-direction: row;
 z-index: 999;
}

.footerShells > view {
 display: flex;
 /* margin-top: 8upx; */
 flex: 1;
 height: 100%;
 text-align: center;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}

.footerShells .Selection {
 color: #1277e1;
}

.footerShells .Selection span {
 color: #1277e1;
}

.footerShells .Selection .footText {
 color: #1277e1;
}

.footerShells span {
 font-size: 36upx;
 text-align: center;
 color: #666;
}

.footText {
 text-align: center;
 font-size: 24rpx;
 color: #666;
 margin: 8rpx 0 0;
}
</style>

4，完整的home页代码

<template>
  <view>
    <view>首页</view>
    <!-- 底部tab -->
    //flag等于几取决于组件页面的id
    <tablebox class="flex:none" flag="1"></tablebox>
  </view>
</template>
<script>
import tablebox from '../../../components/tablebox.vue';
export default {
  components: {
    tablebox,
  },
};
</script>

第二种方法

pages.json

{
      "path": "pages/tabbar/home/home",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "enablePullDownRefresh": true //开启下拉刷新
      }
    },
    {
      "path": "pages/tabbar/my/my",
      "style": {
        "navigationBarTitleText": "废水",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black"
      }
    },
    {
      "path": "pages/tabbar/gas/gas",
      "style": {
        "navigationBarTitleText": "废气",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black"
      }
    },

底部栏的大小颜色等设置

"tabBar": {
    "color": "#7A7E83", //字体颜色
    "selectedColor": "#007AFF", //选中时字体颜色
    "borderStyle": "black", //底部的上边框线条
    "backgroundColor": "#F8F8F8", //底部背景色
    "fontSize": "12px", //字体大小
    "spacing": "5px", //字体到图标的距离
    "height": "50px", //底部高
    "list": [
      {
        "pagePath": "pages/tabbar/home/home",
        "text": "首页",
        "iconPath": "static/home2.png",//未选中时图片样式
        "selectedIconPath": "static/home1.png"//选中时图片样式
      },
      {
        "pagePath": "pages/tabbar/my/my",
        "text": "废水",
        "iconPath": "static/shui2.png",
        "selectedIconPath": "static/shui1.png"
      },
      {
        "pagePath": "pages/tabbar/gas/gas",
        "text": "废气",
        "iconPath": "static/gas2.png",
        "selectedIconPath": "static/gas1.png"
      }
    ]
  }