设置tabBar的几种方式

一、直接在app.json里面设置

app.json

 "pages": [
    "pages/list/list",
    "pages/message/message",
    "pages/mine/mine",
    "pages/index/index",
    "pages/myCase/myCase"
  ],
 "tabBar": {  
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "./assets/homes.png",
        "iconPath": "./assets/home.png",
        "pagePath": "pages/list/list",
        "text": "首页"
      },
      {
        "selectedIconPath": "./assets/messages.png",
        "iconPath": "./assets/message.png",
        "pagePath": "pages/message/message",
        "text": "消息"
      },
      {
        "selectedIconPath": "./assets/mines.png",
        "iconPath": "./assets/mine.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  },

页面：

image.png

虽然在app.json里面设置tabBar很方便。但是也有弊端。如果是每个页面都需要有这个tabBar的话，显然用原生的就不能满足这个需求了。因此我们需要第二种方案。

二、自定义组件设置tabBar

1、先在与pages同级下建立一个文件。

此处我是放在了components文件夹里面，后期有公用的组件都可以放在里面

image.png

2、写里面的内容

wxml文件

<view>
    <van-tabbar active="{{ active }}" bind:change="onChange">
        <van-tabbar-item>
            <image slot="icon" src="{{ icon.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
            <image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
            首页
        </van-tabbar-item>
        <van-tabbar-item>
            <image slot="icon" src="{{ icon.active1 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
            <image slot="icon-active" src="{{ icon.normal1 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
            消息
        </van-tabbar-item>
        <van-tabbar-item>
            <image slot="icon" src="{{ icon.active2 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
            <image slot="icon-active" src="{{ icon.normal2 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
            我的
        </van-tabbar-item>
    </van-tabbar>
</view>

js文件

Page({
    data: {
      active: 0,
      icon: {
       normal: '/assets/home.png',
        active: '/assets/homes.png',
        normal1: '/assets/messages.png',
        active1: '/assets/message.png',
        normal2: '/assets/mines.png',
        active2: '/assets/mine.png',
      },
    },
    onChange(event) {
      this.setData({ active: event.detail });
    },
  });

wxss文件

.van-tabbar-item__text {
    font-size: 14px;
}

3、在app.json里面注册一下

  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "tabBar": "./components/tabber/tabber"
  },

由于用了组件库，所以此处要同时引入组件库的样式

4、直接在页面中使用

  <tabBar></tabBar>

效果

image.png

此时，哪个页面要用 就直接执行最后一步使用组件库就好了。