自定义支付宝小程序底部导航栏

自定义支付宝小程序底部导航栏

1. 在app.json tabBar 配置基础上新增"customize":true

2.在项目根目录下创建customize-tab-bar

3.编写代码，如下：

axml

<view class="tab-bar">
  <view a:for="{{list}}" a:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}"
    onTap="switchTab">
    <view a:if="item.bulge" class="tab-bar-bulge"></view>
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" class="icon"></image>
    <view a:if="{{item.text}}" style="color: {{selected === index ? selectedColor : color}}" class="text">{{item.text}}</view>
  </view>
</view>

acss.

tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  background: #FFF;
  display: flex;
  box-shadow: 0px -4px 10px rgba(232, 232, 232, 0.95);
  /* padding-bottom: calc(env(safe-area-inset-bottom) /2); */
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item .icon {
  width: 46rpx;
  height: 46rpx;
}


.bulge {
  ">#FFF;
}

.bulge .tab-bar-bulge {
  position: absolute;
  z-index: -1;
  top: -60rpx;
  width: 135rpx;
  height: 135rpx;
  border-radius: 50%;
  ">#FFF;
  box-shadow: 0px -4px 10px rgba(232, 232, 232, 0.95);
}

.bulge .icon {
  position: absolute;
  width: 125rpx;
  height: 125rpx;
  top: -56rpx;
  padding: 5rpx;
}

.bulge .text {
  padding-top: 45rpx !important;
}

.tab-bar-item .text {
  font-size: 22rpx;
  padding-top: 8rpx;
  color: #333;
}

js

// 自定义导航
Component({
  data: {
    selected: 0,
    color: "#000",
    selectedColor: "#000",
    list: [{
      pagePath: "",
      iconPath: "",
      selectedIconPath: "",
      text: "首页"
    }, {
      pagePath: "",
      iconPath: "",
      selectedIconPath: "",
      text: "公益"
    }, {
      pagePath: "",
      iconPath: "",
      selectedIconPath: "",
      text: "",
      bulge: 'bulge'
    }, {
      pagePath: "",
      iconPath: "",
      selectedIconPath: "",
      text: "常见"
    }, {
      pagePath: "",
      iconPath: "",
      selectedIconPath: "",
      text: "我的"
    }]
  },

  attached() {},

  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path;
      wx2my.switchTab({
        url
      });
      this.setData({
        selected: data.index
      });
    }
  }
});

注意事项

自定义 tabBar 默认 z-index：10000，若不满足项目实际场景可通过类名 a-customize-tab-bar 进行覆盖。

.a-customize-tab-bar{
  z-index：999;
}

感谢观看！！！