小程序自定义tabbar

小程序根目录创建文件夹并建立以下文件

在app.json添加tabBar 如下图：

创建完成在app.json中使用 “usingComponents”:{} 全局配置

index.wxml文件

	<view class='tab-bar'>
    <view class="tab-bar-bg"></view>
    
    <!-- 首页 -->
    <view class='tab-bar-index' data-index='0' data-path='{{list[0].pagePath}}' bindtap='tab_bar_index'>
      <view class='tab-bar-icon'>
        <image src='{{selected == 0 ? list[0].selectedIconPath : list[0].iconPath}}' class='tab-bar-img'/>
        <view class='tab-bar-tmp'/>
        <view class='tab-bar-text' style='color:{{selected == 0 ? selectedColor : color}}'>首页</view>
      </view>
    </view>

    <!-- 分类 -->
    <view class='tab-bar-index' data-index='1' data-path='{{list[1].pagePath}}' bindtap='tab_bar_index'>
      <view class='tab-bar-icon'>
        <image src='{{selected == 1 ? list[1].selectedIconPath : list[1].iconPath}}' class='tab-bar-img'/>
        <view class='tab-bar-tmp'/>
        <view class='tab-bar-text' style='color:{{selected == 1 ? selectedColor : color}}'>分类</view>
      </view>
    </view>

    <!-- 卖东西 -->
    <view class='tab-bar-index-add' bindtap='tab_bar_add'>
      <view class='tab-bar-icon_add'>
        <view style='width:100%;height:3px;'/>
        <image class='tab-bar-img-add' src='{{addImgPath}}'/>
      </view>
      <view class='tab-bar-text center' >我要卖</view>
    </view>

    <!-- 采购中心 -->
    <view class='tab-bar-index' data-index='2' data-path='{{list[2].pagePath}}' bindtap='tab_bar_index'>
      <view class='tab-bar-icon'>
        <image src='{{selected == 2 ? list[2].selectedIconPath : list[2].iconPath}}' class='tab-bar-img'/>
        <view class='tab-bar-tmp'/>
        <view class='tab-bar-text' style='color:{{selected == 2 ? selectedColor : color}}'>采购中心</view>
      </view>
    </view>

    <!-- 个人中心 -->
    <view class='tab-bar-index' data-index='3' data-path='{{list[3].pagePath}}' bindtap='tab_bar_index'>
      <view class='tab-bar-icon'>
        <image src='{{selected == 3 ? list[3].selectedIconPath : list[3].iconPath}}' class='tab-bar-img'/>
        <view class='tab-bar-tmp'/>
        <view class='tab-bar-text'  style='color:{{selected == 3 ? selectedColor : color}}'>个人中心</view>
      </view>
    </view>

</view>

index.wxss文件

/* tabBar总体 */
.tab-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140rpx;
  display: flex;
  flex-direction: row;
  z-index: 99999999999999999999999;
  padding-bottom: 24rpx;
}
/* 背景图片 */
.tab-bar-bg{
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 75%;
  z-index: -1;
  background: #fff;
  border-top: 0.5rpx solid #d6d6d6;
}
/* 背景一条线 */
.tab-bar-bg-view{
  width: 100%;
  height: 1px;
  background:  rgba(0, 0, 0, 0.33);
  position: absolute;
  top: 32rpx;
  z-index: -1;
}
/* tabBar内容快 */
.tab-bar-index{
  display: flex;
  flex: 1;
  font-size: 30rpx;
  height: 100rpx;
  margin-top: 40rpx;
  z-index: 1;
}
/* tarBar添加发布单独内容快 */
.tab-bar-index-add{
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 30rpx;
  z-index: 1;
  height: 140rpx;
}
/* 图标字体结合内容快 */
.tab-bar-icon{
  width: 100%;
  height: 90rpx;
  margin-top: 10rpx;
  display: flex;
  flex-direction: column;
}
/* 图标字体结合内容快添加发布单独设置 */
.tab-bar-icon_add{
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
}
/* 内容快图片 */
.tab-bar-img{
  width: 50rpx;
  height: 50rpx;
  margin: 0 auto;
}
/* 内容快添加发布单独图片设置 */
.tab-bar-img-add{
  width: 100rpx;
  height: 100rpx;
  margin: 0 auto;
}
/* 内容快挤位置 */
.tab-bar-tmp{
  width: 100%;
  height: 7rpx;
}
/* 内容快文字 */
.tab-bar-text{
  width: 100%;
  text-align: center;
  font-size: 20rpx;
  margin: 0 auto;
  color: #5b5b5b;
}
.tab-bar-text.center{
  color:  rgba(0, 0, 0, .7);
  margin-top: 6rpx;
}

index.js

Component({
  //数据
  data: {
    selected: 0,//当前tabBar页面
    color: "#666666",//未选中tabBar时的文字颜色
    selectedColor: "#3594e3",//选中时tabBar文字颜色
    addImgPath:'/image/add.png',//添加发布图标
    // tabBar对象集合
    "list": [{
      "selectedIconPath": "/image/home_img1.png",
      "iconPath": "/image/home_img.png",
      "pagePath": "/pages/Home/home/home",
      "text": "首页"
    },
    {
      "selectedIconPath": "/image/fl.png",
      "iconPath": "/image/fl1.png",
      "pagePath": "/pages/Home/category/category",
      "text": "分类"
    },
    {
      "selectedIconPath": "/image/shops_img1.png",
      "iconPath": "/image/shops_img.png",
      "pagePath": "/pages/Home/shopp/shopp",
      "text": "采购订单"
    },
    {
      "selectedIconPath": "/image/users_img1.png",
      "iconPath": "/image/users_img.png",
      "pagePath": "/pages/Home/user/user",
      "text": "个人中心"
    }
  ]
  },
  created(){
    var model =  wx.getSystemInfoSync().model;
    if(model.indexOf('iPhone') != -1){
      this.setData({
        bottom:true
      })
      console.log('1')
    }else{
      this.setData({
        bottom:false
      })
    }
  },
  methods: {
    // tabBar切换事件
    tab_bar_index(e) {
      const url = e.currentTarget.dataset.path;
      wx.switchTab({url})
      this.setData({
        selected: e.currentTarget.dataset.index
      })
    },

    // 发布添加按钮跳转
    tab_bar_add() {
      var url = "/pages/Showcase/pages/release/release"
      wx.navigateTo({url})
    }
  }
})

index.json

{
  "component":true
}

创建完成后展示效果如下

完成到这一步还未完成，需要在需要切换的tabbat页面的onShow中加入如下代码

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

否则tab切换图片不会变换，selected的值根据tabbar对应的下标填写

如果不需要中间自定义的跳转，注释即可，注释后样式自行修改

总结使用自定义tabbar遇到的问题

1. 部分机型下拉时tabbar没有一直固定在底部，所以得在css中手动添加绝对定位
2. tabbar的高度适配，iPhone底下带黑边，自定义tabbar会被挡住，解决方法有很多种，该项目为了方便只增加了高度，如果不想单纯增加高度可以判断机型来选择是否顶高
3. 官方使用的是canvas-view，但是在使用过程中感觉很不方便，便替换成了view，如果使用过程中出现了问题，再改动