小程序的底部菜單欄基本的樣式根本不能滿足我們的審美要求，所以我們可以通過自己來自定義一套小程序底部欄，可以設(shè)置透明背景喲，想要什么樣式都可以自己定義，好了，廢話不多說，直接上代碼！

首先在和pages同一級(jí)建錄建立tabbar.xml,如右截圖所示

具體的tabbar.xml代碼如下所示：下面是講這個(gè)代碼封裝成了一個(gè)模板，好處大家都知道，就是方便多處使用 
<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>
3.接下來就是app.wxss中寫樣式了，具體代碼如下所示：

/**app.wxss**/
 
.container {
  width: 100%rpx;
  height: 100%rpx;
  font-size: 32rpx;
}
 
 
.menu-item {
  width: 24%;
  float: left;
  border-right: 1px solid rgb(200, 200, 200);
  text-align: center;
  padding-top: 8px;
}
.menu-item2{
  border-right:none;
}
 
.img {
  width: 23px;
  height: 23px;
  display: block;
  margin: auto;
}
 
.clear {
  clear: both;
}
 
.tab-bar {
  background-color:rgb(243, 243, 243);
  opacity: .8;
  position: fixed;
  width: 100%;
  /* padding: 0px 2%; */
}
4. 就是在app.js中寫js動(dòng)態(tài)樣式了，從36行開始到最后一行

//app.js
App({
  onLaunch: function () {
    // 展示本地存儲(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)
              }
            }
          })
        }
      }
    })
  },
  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: "#a9b7b7",
 
      selectedColor: "#ff8124",
 
      borderStyle: "white",
 
      list: [
        {
          selectedIconPath: "/pages/image/1-1.png",
 
          iconPath: "/pages/image/1.png",
 
          pagePath: "/pages/index/index",
 
          text: "首頁(yè)",
 
          clas: "menu-item",
 
          selected: false,
 
        },
 
        {
 
          selectedIconPath: "/pages/image/2-1.png",
 
          iconPath: "/pages/image/2.png",
 
          pagePath: "/pages/collect/collect",
 
          text: "收藏",
 
          clas: "menu-item",
 
          selected: false
 
        },
 
        {
 
          selectedIconPath: "/pages/image/3-1.png",
 
          iconPath: "/pages/image/3.png",
 
          pagePath: "/pages/disses/disses",
 
          text: "需求填寫",
 
          clas: "menu-item",
 
          selected: false
 
        },
 
        {
 
          selectedIconPath: "/pages/image/4-1.png",
 
          iconPath: "/pages/image/4.png",
 
          pagePath: "/pages/index/index",
 
          text: "房屋管理",
 
          clas: "menu-item menu-item2",
 
          selected: false
 
        }
 
      ],
 
      position: "bottom"
 
    }
 
  }
})
5. 最后就是引用這個(gè)定義好的模板了，代碼如下：

5.1首先帶在js中頁(yè)面正在加載的時(shí)候就顯示出來，代碼就是下面的onload執(zhí)行的代碼

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
 
Page({
  onLoad: function (options) {
    app.editTabBar();
 
  }
})
5.2然后就是collection.wxml中的引用模板就可以了


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