uni-app项目页面底部导航栏

uni-app项目页面底部导航栏 使用步骤 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: 48rpx; height: 48rpx" :src="item.image1" />
       <image v-else style="width: 48rpx; height: 48rpx" :src="item.image2" />
       <view class="footText">{{ item.name }}</view>
     </view>
   </view>
 </view>
</template>

<script>
export default {
 data() {
   return {
     flag: 1,
     list: [
       {
         id: '1',
         url: '../tabbar/home/home',
         name: '首页',
         image1: '../static/home1.png',
         image2: '../static/home2.png',
       },
     ],
   };
 },
 methods: {
   Jump(item) {
     console.log('item', item);
     uni.setStorageSync('Jumpid', item.id);
     uni.reLaunch({
       url: item.url,
     });
   },
 },
 mounted() {
   this.list = [];
   let arr = [];
   arr = [
     {
       id: '1',
       url: '/pages/tabbar/home/home',
       name: '首页',
       image1: '../static/home1.png',
       image2: '../static/home2.png',
     },
     {
       id: '2',
       url: '/pages/tabbar/my/my',
       name: '废水',
       image1: '../static/shui1.png',
       image2: '../static/shui2.png',
     },
     {
       id: '3',
       url: '/pages/tabbar/gas/gas',
       name: '废气',
       image1: '../static/gas1.png',
       image2: '../static/gas2.png',
     },
   ];
   this.list = arr;

   //判断Jumpid存在
   if (uni.getStorageSync('Jumpid')) {
     this.flag = uni.getStorageSync('Jumpid');
   } else {
     this.flag = '1';
   }
 },
};
</script>

<style>
.tableboxpage {
 height: 100upx;
 flex: none;
}
.footerShells {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100upx;
 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: 26upx;
 color: #666;
}
</style>

4，完整的home页代码

<template>
  <view>
    <view>首页</view>
    <!-- 底部tab -->
    <tablebox class="flex:none"></tablebox>
  </view>
</template>
<script>
import tablebox from '../../../components/tablebox.vue';
export default {
  components: {
    tablebox,
  },
};
</script>

4，效果图