uni-app关于tabBar配置_uniapp tabbar

uni-app关于tabBar配置

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

第一种方法

使用步骤

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

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

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

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

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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32