1.定義tabBar

app.json中添加tabBar信息，custom設(shè)為true

"tabBar": {
    "custom": true,
    "backgroundColor": "#f7f7f7",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "邀請函"
      },
      {
        "pagePath": "pages/address/address",
        "text": "地址導(dǎo)航"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "聯(lián)系我們"
      }
    ]
  },

2.更改tabBar

根目錄下創(chuàng)建custom-tab-bar文件夾
--file index.wxml
這里icon字體圖標(biāo)的做法上一篇介紹過微信小程序-字體圖標(biāo)

<view class="row bg-white justify-between custom-tab-bar" active="{{ active }}" active-color="#07c160">
  <view class="column align-center {{selected === index ? 'color-primary' : 'color-black'}}" 
    wx:for="{{ list }}" wx:key="index" data-index="{{index}}"  bindtap="onChange"  
    data-url="{{item.pagePath}}">
    <icon class="iconfont {{ item.icon }}"></icon>
    {{item.text}}
  </view>
</view>

--file index.js

Component({
  data: {
    selected: 0,
    "list": [
      {
        "pagePath": "/pages/index/index",
        "text": "邀請函",
        "icon": "icon-qingshu"
      },
      {
        "pagePath": "/pages/address/address",
        "icon": "icon-lvhang",
        "text": "地址導(dǎo)航"
      },
      {
        "pagePath": "/pages/contact/contact",
        "icon": "icon-gezi",
        "text": "聯(lián)系我們"
      }
    ]
  },
  methods: {
    onChange(e) {
      const data = e.currentTarget.dataset;
      wx.switchTab({
        url: data.url
      });
    },
    init() {
      const page = getCurrentPages().pop();
      this.setData({
        selected: this.data.list.findIndex(item => item.pagePath === `/${page.route}`)
      });
    }
  }
})

其他頁面需要加入如下

  onShow() {
    this.getTabBar().init();
  }

自定義樣式

.custom-tab-bar {
  height: 50rpx;
  padding: 30px 20px 50px 20px;
  font-family: 'ZCOOL KuaiLe';
  border-top-left-radius: 65% 40%;
  border-top-right-radius: 65% 40%;
}

效果圖

效果圖