設置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

此時，哪個頁面要用 就直接執(zhí)行最后一步使用組件庫就好了。