微信小程序自定义tabBar-一一网

小程序在基础库2.5.0开始支持的了自定义的tabbar。

自定义tabBar详细步骤如下：

一、配置app.json

自定义tabBar重要的一步，是需要配置tabBar中 “custom”: true ,同时其余 tabBar 相关配置也补充完整, list不能省略，并且要跟自定义tabbar中的list一致，否则会出现报错
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启

{
    "tabBar": {
        "custom": true,
        "color": "#ccc",
        "selectedColor": "#ff6861",
        "borderStyle": "black",
        "backgroundColor": "#fff",
        "list": [
          {
            "pagePath": "pages/index/index",
            "iconPath": "images/tabbar/home.png",
            "text": "商城",
            "selectedIconPath": "images/tabbar/home-o.png"
          },
          {
            "pagePath": "pages/catalog/catalog",
            "iconPath": "images/tabbar/cate.png",
            "text": "分类",
            "selectedIconPath": "images/tabbar/cate-o.png"
          },
          {
            "pagePath": "pages/cart/cart",
            "iconPath": "images/tabbar/cart.png",
            "text": "购物车",
            "selectedIconPath": "images/tabbar/cart-a.png"
          },
          {
            "pagePath": "pages/ucenter/index/index",
            "iconPath": "images/tabbar/user.png",
            "text": "我的",
            "selectedIconPath": "images/tabbar/user-o.png"
          }
        ]
      },
     "usingComponents": {}
  }
复制代码

二、将tabBar的icon 放置在项目文件中

自定义tabBar同tabBar标准一样，不能将icon图片放置在服务器

三、在根目录新建自定义tabBar组件 custom-tab-bar

一定要在根目录，不然会出现选中紊乱等问题；
组件文件名，需要设置为index

四、编写tabBar组件

index.wxml

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="https://juejin.cn/post/{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>
复制代码

index.js

Component({
  data: {
    selected: 0,
    color: "#ccc",
    selectedColor: "#ff6861",
    list: [{
      pagePath: "/pages/index/index",
      iconPath: "/images/tabbar/home.png",
      text: "首页",
      selectedIconPath: "/images/tabbar/home-a.png"
    },
    {
      pagePath: "/pages/catalog/catalog",
      iconPath: "/images/tabbar/cate.png",
      text: "分类",
      selectedIconPath: "/images/tabbar/cate-o.png"
    },
    {
      pagePath: "/pages/cart/cart",
      iconPath: "/images/tabbar/cart.png",
      text: "购物车",
      selectedIconPath: "/images/tabbar/cart-a.png"
    },
    {
      pagePath: "/pages/ucenter/index/index",
      iconPath: "/images/tabbar/user.png",
      text: "我的",
      selectedIconPath: "/images/tabbar/user-o.png"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})
复制代码

index.json

{
  "component": true
}
复制代码

五、注意事项

控制tabbar是否在该界面显示，需要在显示tabbar中的页面中，添加以下代码：

 onShow: function() {
    // 页面显示
    if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0  // 对应当前页面在tabbar--list中的索引
        })
      }
  },
复制代码