這個(gè)方法比較簡(jiǎn)單，雖然有一些延遲，但也算是解決了一半自定義的問(wèn)題。

首先在pages同級(jí)目錄下創(chuàng)建tabbar.wxml文件，

<template name="tabBar">
<view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">
<block wx:for="{{tabBar.list}}" wx:key="pagePath">
<navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">
<image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>
<image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>
<text>{{item.text}}</text>
</navigator>
</block>
<view class="clear"></view>
</view>
</template>

接著修改app.wxss樣式，有很多人沒(méi)有放樣式的代碼，為了看著改方便，我就放一下吧。

/**app.wxss**/
 
.container {
  font-size:14px;
  height: 90rpx;

}
 
 .menu-item:nth-child(1){
   font-size: 11px;
 }
.menu-item {
  width: 24%;
  float: left;
  text-align: center;
  line-height: 30rpx;
}
.menu-item2{
  border-right:none;
}
 
.img {
  width: 40rpx;
  height: 40rpx;
  display: block;
  margin: auto;
}
 
.clear {
  clear: both;
}
 
.tab-bar {
  background-color:#242630;
  position: fixed;
  border:none;
  width: 100%;
  height: 90rpx;
  /* padding: 0px 2%; */
}

在app.js文件中加入下邊這些代碼，我直接放了全部的js，還是因?yàn)閼泄?/p>

//app.js
App({

  onLaunch: function() {
    wx.getSystemInfo({
      success: res => {
        //導(dǎo)航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      },
      fail(err) {
        console.log(err);
      }
    })
    // 展示本地存儲(chǔ)能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登錄
    wx.login({
      success: res => {
        // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
      }
    })
    // 獲取用戶信息
    wx.getSetting({
        success: res => {
          if (res.authSetting['scope.userInfo']) {
            // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會(huì)彈框
            wx.getUserInfo({
              success: res => {
                // 可以將 res 發(fā)送給后臺(tái)解碼出 unionId
                this.globalData.userInfo = res.userInfo

                // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
                // 所以此處加入 callback 以防止這種情況
                if (this.userInfoReadyCallback) {
                  this.userInfoReadyCallback(res)
                }
              }
            })
          };
          console.log(res)
        },
      }),
      wx.getSystemInfo({
        success: res => {
          //導(dǎo)航高度
          this.globalData.navHeight = res.statusBarHeight + 46;
        },
        fail(err) {
          console.log(err);
        }
      })
  },
   globalData: {
    userInfo: null
  },
  editTabBar: function () {

    var _curPageArr = getCurrentPages();

    var _curPage = _curPageArr[_curPageArr.length - 1];

    var _pagePath = _curPage.__route__;

    if (_pagePath.indexOf('/') != 0) {

      _pagePath = '/' + _pagePath;

    }

    var tabBar = this.globalData.tabBar;

    for (var i = 0; i < tabBar.list.length; i++) {

      tabBar.list[i].active = false;

      if (tabBar.list[i].pagePath == _pagePath) {

        tabBar.list[i].active = true;//根據(jù)頁(yè)面地址設(shè)置當(dāng)前頁(yè)面狀態(tài)

      }

    }

    _curPage.setData({

      tabBar: tabBar

    });

  },

  globalData: {

    userInfo: null,

    tabBar: {

      color: "#999999",

      selectedColor: "#FFFFFF",
      list: [
        {
          pagePath: "/pages/index/index", 
          selectedIconPath: "/pages/images/like.png",
          iconPath: "/pages/images/like.png",
          text: "首頁(yè)",
          clas: "menu-item",
          selected: false,
        },
        {

          pagePath: "/pages/line/line",

          text: "收藏",

          clas: "menu-item",

          selected: false

        },

        {

          pagePath: "/pages/shopping/shopping",

          text: "需求填寫",

          clas: "menu-item",

          selected: false

        },
        {

          pagePath: "/pages/my/my",

          text: "房屋管理",

          clas: "menu-item menu-item2",

          selected: false

        }

      ],

      position: "bottom"

    }

  }

})

到了此處所有的模版代碼就已經(jīng)完成了，下面我們來(lái)引入模版

在你需要模版的.wxml文件中加入

<view class="container">
  <import src="../../tabbar.wxml" />
  <template is="tabBar" data="{{tabBar}}" />
  2
</view>

然后再對(duì)應(yīng)的js文件中加入

const app = getApp()

Page({

  data: {

  },
  onLoad: function (options) {
    app.editTabBar();
  },
})