微信小程序自定义tabBar以及图标-使用vant-weapp

小程序整合vant weapp可以看《微信小程序vant weapp安装与使用》

微信官方文档有介绍自定义tabBar

1、在小程序根目录下创建custom-tab-bar文件夹，并创建以下文件。（这个是作为入口文件的）

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

2、修改custom-tab-bar/index.js （清除初始化的内容）

Component({
  data: { 
    selected: 0,
    list: [
      {
        pagePath: "/pages/checkin/checkin",
        text: "打卡",
        normal: '/images/tabbar/position.png',
        active: '/images/tabbar/position-green.png'
      },
      {
        pagePath: "/pages/idcard/idcard",
        text: "上传",
        normal: '/images/tabbar/idcard.png',
        active: '/images/tabbar/idcard-green.png'
      }
    ]
  },
  methods: {
    onChange(e) {
       console.log(e,'e')
       this.setData({ active: e.detail });
       wx.switchTab({
         url: this.data.list[e.detail].pagePath
       });
    },
    init() {
        const page = getCurrentPages().pop();
        this.setData({
       　  active: this.data.list.findIndex(item => item.pagePath === `/${page.route}`)
        });
       }
    }
})

3、修改custom-tab-bar/index.json

{
  "component": true,
    "usingComponents": {
      "van-tabbar": "@vant/weapp/tabbar/index",
      "van-tabbar-item": "@vant/weapp/tabbar-item/index",
      "van-icon": "@vant/weapp/icon/index"
    }
}

4、 修改custom-tab-bar/index.wxml

       代码中两个imgage是自定义图标的，未选中是item.normal图片，选中了是item.active

<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#07c160" inactive-color="gainsboro">
  <van-tabbar-item wx:for="{{ list }}" wx:key="index" >
    <image
      slot="icon"
      src="{{ item.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ item.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    /> 
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

5、在app.json添加tabBar

"tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "pages/checkin/checkin",
        "text": "打卡"
      },
      {
        "pagePath": "pages/idcard/idcard",
        "text": "上传"
      }
    ]
  }

 6、每个tabBar页面的onShow()方法添加

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getTabBar().init();
  },

效果图如下

 

源码下载：自定义tabBar