微信小程序开发 底部自定义tabbar

微信官方文档-自定义tabBar

1、新建custom-tab-bar

在项目文件根目录下，新建目录custom-tab-bar，并新建component文件命名为index【注：这边新建的位置、名称，不能变动】

2、custom-tab-bar/index.js

// custom-tab-bar/index.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,  // 当前菜单中的索引
    color: '#9A9DAE',
    selectedColor: '#3898E6',
    tabList: [
      {
        "pagePath": "/pages/home1/index",  // 页面地址
        "text": "搜索",  // 菜单名
        "iconPath": "/resources/images/icon/searchBar.png",  // 菜单图标
        "selectedIconPath": "/resources/images/icon/selectedSearchBar.png"  // 选中时的菜单图标
      },
      {
        // "pagePath": "/pages/patrol/index",
        "pagePath": "/pages/patrol/index",
        "bulge": true,
        // "text": "巡查",
        "iconPath": "/resources/images/icon/spatrolBar.png",
        "selectedIconPath": "/resources/images/icon/spatrolBar.png"
      },
      {
        "pagePath": "/pages/my/index",
        "text": "我的",
        "iconPath": "/resources/images/icon/myBar.png",
        "selectedIconPath": "/resources/images/icon/selectedMyBar.png"
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      console.log(e.currentTarget.dataset)
      let dataset = e.currentTarget.dataset;
      wx.switchTab({
        url: dataset.path,
      })
    }
  }
})

3、custom-tab-bar/index.wxml

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

4、custom-tab-bar/index.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 兼容 iOS < 11.2 */
  height: calc(96rpx + constant(safe-area-inset-bottom));
  /* 兼容 iOS >= 11.2 */
  height: calc(96rpx + env(safe-area-inset-bottom));
  background: #fff;
  display: flex;
  box-shadow: 0px -10rpx 12rpx rgba(0, 0, 0, 0.08);
}
 
.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
 
.tab-bar-item .image {
  width: 38rpx;
  height: 38rpx;
  margin-bottom: 18rpx;
}
 
.bulge {
  background-color: #fff;
}
 
.bulge .image {
  position: absolute;
  width: 94rpx;
  height: 94rpx;
  /* top: 13rpx; */
}
 
.tab-bar-item .tab-bar-view {
  /* font-size: 20rpx; */
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 20rpx;
}

5、在跳转页面中

在跳转页面中

  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

app.json

“custom”: true

注：如果你使用的是vant-weapp组件得话，注意弹窗，如日历从底部划出会遮盖确认按钮