微信小程序自定义tabbar

自己看了微信小程序，因为需要用到字体图标，所以需要自定义一个tabbar，自己学的来源于，网络上的一个热心博主的分享，这个是他原博客的连接

1. 我是先创建了一个文件夹，相当于存放了tabbar组件，里面新建一系列的文件。
   
   先简单讲下tabbar各个文件的内容。
   tabbar.json内容

{
  "component": true,
  "usingComponents": {}
}

wxml文件内容：

<view class='tabbar_box' style='background-color:{{tabbar.backgroundColor}}'>
<!-- 此处用到了循环，里面的数据动态获取 -->
  <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
    <navigator class="tabbar_nav" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
      <icon class="icon {{item.iconPath}}"></icon>
      <text>{{item.text}}</text>
    </navigator>
  </block>
</view>

tabbar.wxss文件内容

/* 此处用于引入font.wxss */
@import '../../css/font.wxss';
.tabbar_box{
  display: flex;
  justify-content: space-around;
  position: fixed;
  height: 96rpx;
  width: 100%;
  bottom: 0;
  left: 0;
  border-top: 1px solid #a9abac;
  box-sizing: border-box;
  padding-top: 12rpx;
}
.tabbar_box text{
  font-size: 20rpx;
}
.tabbar_box .icon{
  font-size: 45rpx;
}
.tabbar_box .tabbar_nav{
  display: flex;
  flex-direction: column;
  align-items: center;
}

tabbar.js文件内容

// component/tabBar.js
const app = getApp();
Component({
  /**
 1. 组件的属性列表
   */
  properties: {
    tabbar:{
      type:Object
    }
  },
})

2. 在app.js修改如下
   首先使用wx.hideTabBar();隐藏自带的tabbar；然后添加editTabbar()函数，直接复制就可以。然后在globalData属性中添加tabbar的配置，之前tabbar.wxml里面所用到的数据来源于app.js中的全局数据当中。

//app.js
App({
  onLaunch: function () {
    // 隐藏自带的tabbar
    wx.hideTabBar();
  },
  editTabbar: function () {
    let tabbar = this.globalData.tabBar;
    let currentPages = getCurrentPages();
    let _this = currentPages[currentPages.length - 1];
    let pagePath = _this.route;
    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
    for (let i in tabbar.list) {
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },
  globalData: {
    systemInfo: null,//客户端设备信息
    userInfo: null,
    tabBar: {
      "backgroundColor": "#ffffff",
      "color": "#3d3d3d",
      "selectedColor": "#ea3f40",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "iconPath": "icon-home",
          "text": "首页"
        },
        {
          "pagePath": "/pages/search/search",
          "iconPath": "icon-search",
          "text": "搜索"
        },
        {
          "pagePath": "/pages/redpac/redpac",
          "iconPath": "icon-hongbao",
          "text": "赚红包"
        },
        {
          "pagePath": "/pages/cart/cart",
          "iconPath": "icon-cart",
          "text": "购物车"
        },
        {
          "pagePath": "/pages/my/my",
          "iconPath": "icon-user",
          "text": "我的"
        }
      ]
    }
  }
})

3. app.json文件中配置下路由信息，以及tabbar的路由跳转即可，此处也可以将tabbar的信息再写全一遍，也可以直接写跳转的路径。

{
  "pages": [
    "pages/my/my",
    "pages/index/index",
    "pages/search/search",
    "pages/redpac/redpac",
    "pages/cart/cart"
  ],
  "window": {
    "navigationBarBackgroundColor": "#eb5c40",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index"
      },
      {
        "pagePath": "pages/search/search"
      },
      {
        "pagePath": "pages/redpac/redpac"
      },
      {
        "pagePath": "pages/cart/cart"
      },
      {
        "pagePath": "pages/my/my"
      }
    ]
  }
}

以上tabbar组件以及全局中已经配置完毕了，下面就是在每个页面中调用组件。
4. 举个首页的例子，其他的页面都是按照这样的操作调用组件
在json文件中配置组件路径

{
  "usingComponents": {
    "tabbar": "../../component/tabbar/tabbar"
  }
}

wxml中引用组件

<!--index.wxml-->
<view class="container">
  首页
  <tabbar tabbar="{{tabbar}}"></tabbar>
</view>

在js中onLoad函数中调用app.editTabbar();

//index.js
//获取应用实例
const app = getApp();

Page({
  onLoad: function () {
    app.editTabbar();
  }
})

其他的页面和首页一样引用即可；
这样就已经完成了整个的自定义tabbar的配置。希望可以一起探讨。谢谢