小程序-自定义tabbar

新建组件

image.png

tabbar.wxml

<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
  <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
    <navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
      <view class='special-wrapper'>
        <image class="tabbar_icon" src="{{item.iconPath}}"></image>
      </view>
      <image class='special-text-wrapper'></image>
      <text>{{item.text}}</text>
    </navigator>
    <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
      <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
      <text>{{item.text}}</text>
    </navigator>
  </block>
</view>

tabbar.wxss

.tabbar_box {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 118rpx;
  box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.1);
}

.tabbar_box.iphoneX-height {
  padding-bottom: 66rpx;
}

.middle-wrapper {
  position: absolute;
  right: 310rpx;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
}

.middle-wrapper.iphoneX-height {
  bottom: 66rpx;
}

.tabbar_nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  height: 100%;
  position: relative;
}

.tabbar_icon {
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 6rpx;
}

.special-wrapper {
  position: absolute;
  left: 30rpx;
  top: -24rpx;
  width: 94rpx;
  height: 96rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
}

.special-wrapper .tabbar_icon {
  width: 94rpx;
  height: 96rpx;
  position: absolute;
  left: 0;
  top: -8rpx;
}

.special-text-wrapper {
  width: 56rpx;
  height: 56rpx;
}

tabbar.js

// tabBarComponent/tabBar.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabbar: {
      type: Object,
      value: {
        "color": "#D2D2D2",
        "selectedColor": "#FFC000",
        "backgroundColor": "#ffffff", 
        "list": [
          {
            "pagePath": "/pages/home/index",
            "iconPath": "/tabbar/shouye.png",
            "selectedIconPath": "/tabbar/shouye02.png",
            "text": "首页"
          },
          {
            "pagePath": "/pages/reserve/index",
            "iconPath": "/tabbar/yuding.png",
            "selectedIconPath": "/tabbar/yuding02.png",
            "text": "预定"
          },
          {
            "pagePath": "/pages/match/index",
            "iconPath": "/tabbar/bisai.png",
            "selectedIconPath": "/tabbar/bisai.png",
            "text": "比赛",
            "isSpecial": true
          },
          {
            "pagePath": "/pages/club/index",
            "iconPath": "/tabbar/julebu.png",
            "selectedIconPath": "/tabbar/julebu02.png",
            "text": "俱乐部"
          },
          {
            "pagePath": "/pages/my/index",
            "iconPath": "/tabbar/wode.png",
            "selectedIconPath": "/tabbar/wode02.png",
            "text": "我的"
          }
        ]
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isIphoneX: app.globalData.systemInfo.model.includes("iPhone X")
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

tabbar.json

{
  "component": true,
  "usingComponents": {}
}

app.js

//app.js
App({
  onLaunch: function(options) {
    //隐藏系统tabbar
    this.hidetabbar();
    //获取设备信息
    this.getSystemInfo();
  },

  onShow: function() {
    wx.hideTabBar();
  },

  //封装wx.hideTabBar
  hidetabbar() {
    wx.hideTabBar({
      fail: function() {
        setTimeout(function() { // 延时保底
          wx.hideTabBar()
        }, 500)
      }
    });
  },

  getSystemInfo: function() {
    let t = this;
    wx.getSystemInfo({
      success: function(res) {
        t.globalData.systemInfo = res;
      }
    });
  },

  // 显示tabbar
  editTabbar: function() {
    let tabbar = this.globalData.tabBar;
    let currentPages = getCurrentPages();
    let _this = currentPages[currentPages.length - 1];
    let pagePath = _this.route;
    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
    for (let i in tabbar.list) {
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },

  globalData: {
    systemInfo: null, //客户端设备信息
    tabBar: {
      "color": "#D2D2D2",
      "selectedColor": "#FFC000",
      "backgroundColor": "#ffffff",
      "list": [{
          "pagePath": "/pages/home/index",
          "iconPath": "/images/tabbar/shouye.png",
          "selectedIconPath": "/images/tabbar/shouye02.png",
          "text": "首页"
        },
        {
          "pagePath": "/pages/reserve/index",
          "iconPath": "/images/tabbar/yuding.png",
          "selectedIconPath": "/images/tabbar/yuding02.png",
          "text": "预定"
        },
        {
          "pagePath": "/pages/match/index",
          "iconPath": "/images/tabbar/bisai.png",
          "selectedIconPath": "/images/tabbar/bisai.png",
          "text": "比赛",
          "isSpecial": true
        },
        {
          "pagePath": "/pages/club/index",
          "iconPath": "/images/tabbar/julebu.png",
          "selectedIconPath": "/images/tabbar/julebu02.png",
          "text": "俱乐部"
        },
        {
          "pagePath": "/pages/my/index",
          "iconPath": "/images/tabbar/wode.png",
          "selectedIconPath": "/images/tabbar/wode02.png",
          "text": "我的"
        }
      ]
    }
  },
})

app.json

"list": [
      {
        "pagePath": "pages/home/index",
        "iconPath": "images/tabbar/shouye.png",
        "selectedIconPath": "images/tabbar/shouye02.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/reserve/index",
        "iconPath": "images/tabbar/yuding.png",
        "selectedIconPath": "images/tabbar/yuding02.png",
        "text": "预定"
      },
      {
        "pagePath": "pages/match/index",
        "iconPath": "/images/tabbar/bisai.png",
        "selectedIconPath": "/images/tabbar/bisai.png",
        "text": "比赛",
        "isSpecial": true
      },
      {
        "pagePath": "pages/club/index",
        "iconPath": "images/tabbar/julebu.png",
        "selectedIconPath": "images/tabbar/julebu02.png",
        "text": "俱乐部"
      },
      {
        "pagePath": "pages/my/index",
        "iconPath": "images/tabbar/wode.png",
        "selectedIconPath": "images/tabbar/wode02.png",
        "text": "我的"
      }
    ]

页面.json

"usingComponents": {
    "tabbar": "/component/custom-tabbar/tabbar"
  }

页面 wxml 使用

<tabbar tabbar="{{tabbar}}"></tabbar>

页面 js

//获取应用实例
const app = getApp()

Page({
  data: {
    tabbar: {}
  },

  onLoad: function() {
    app.editTabbar();
  },

  onShow: function() {
    app.hidetabbar();
  },

})