微信小程序自定义tabbar的详细步骤

今天和大家分享下微信小程序自定义tabbar，主要包括微信小程序自定义tabbar使用实例、应用技巧、基本知识点总结和需要注意事项等。

项目根目录下新建文件夹：custom-tab-bar （文件夹名字必须是custom-tab-bar）在custom-tab-bar下新建一个名为index的component组件进行自定义tabbar开发。

2、使用van-weapp-ui的tabbar组件自定义tabbar

组件中先引入vant-weapp的tabbar组件。
custom-tab-bar/index.json:

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

自定义tabbar组件：
custom-tab-bar/index.wxml：

<!--components/tabbar/tabbar.wxml-->
<view>
  <van-tabbar active="{{ active }}" bind:change="onChange">
    <van-tabbar-item>
      <image slot="icon" src="../images/bar11.png" mode="aspectFit" style=" 24px; height: 24px;" />
      <image slot="icon-active" src="../images/bar12.png" mode="aspectFit" style=" 24px; height: 24px;" /> 首页</van-tabbar-item>
    <van-tabbar-item >
      <image slot="icon" src="../images/bar21.png" mode="aspectFit" style=" 24px; height: 24px;" />
      <image slot="icon-active" src="../images/bar22.png" mode="aspectFit" style=" 24px; height: 24px;" /> 订单</van-tabbar-item>
    <van-tabbar-item>
      <image slot="icon" src="../images/bar31.png" mode="aspectFit" style=" 24px; height: 24px;" />
      <image slot="icon-active" src="../images/bar32.png" mode="aspectFit" style=" 24px; height: 24px;" /> 我的</van-tabbar-item>
  </van-tabbar>
</view>

custom-tab-bar/index.js：

// components/tabbar/tabbar.js
const app = getApp()
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
      active:0,
      isShow:false,
      list: [//在这里申明tabbar的路径
        {
          text: '首页',
          url: '/pages/home/home'
        },
        {
          text: '订单',
          url: '/pages/order/order'
        },
        {
          text: '我的',
          url: '/pages/my/my'
        }
      ],
     infoNum:'',
    },
    /**
     * 组件的方法列表
     */
    methods: {
      onChange(event) {  //点击跳转tabbr页面的事件
        this.setData({ active: event.detail });
        wx.switchTab({
          url: this.data.list[event.detail].url
        });
      },
      init() {  // 初始化
      //需要在每个tabbar的js文件的onShow函数中调用这个方法。
      //调用方式   this.getTabBar().init();
        const page = getCurrentPages().pop();
        this.setData({
          active: this.data.list.findIndex(item => item.url === `/${page.route}`)
        });
      }
    }
})

在app.json中定义tabbar

{
  "tabBar": {   //这部分来定义tabbar的页面路径等
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "pages/home/home"
      },
      {
        "pagePath": "pages/order/order"
      },
      {
        "pagePath": "pages/my/my"
      }
    ]
  },
  "pages": [
    "pages/login/login",
    "pages/logs/logs",
    "pages/home/home",
    "pages/order/order",
    "pages/my/my"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "商城",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

此时点击tabbar时会出现错乱的情况。需要在每个tabbar的js文件的onShow钩子函数中去调用custom-tab-bar/index.js的init方法：

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

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