小程序自定义tabbar踩坑笔记

最近在给客户做一个定制小程序，客户不喜欢小程序自带的tabbar,想要一个炫酷的异形的tabbar,翻看了小程序开发者文档是可以执行的。

参考官方网站，自定义tabBar

根据官方文档，最终历时1.5day，完成tabbar的自定义，效果图片如下：

一、配置信息

1.在app.json中的tabBar项指定custon字段；

 "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/map/map",
        "iconPath": "img/tab_home_nor.png",
        "selectedIconPath": "img/tab_home_sld.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/cafe/cafe",
        "iconPath": "img/tab_coffee_nor.png",
        "selectedIconPath": "img/tab_coffee_sld.png",
        "text": "cafe"
      },
      {
        "pagePath": "pages/main/main",
        "iconPath": "img/tab_scan.png",
        "selectedIconPath": "img/tab_scan.png",
        "text": "扫码 "
      },
      {
        "pagePath": "pages/record/record",
        "iconPath": "img/tab_bill_nor.png",
        "selectedIconPath": "img/tab_bill_sld.png",
        "text": "订单"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "img/tab_user_nor.png",
        "selectedIconPath": "img/tab_user_sld.png",
        "text": "我的"
      }
    ]
  },

二、添加代码文件

这个目录结构是固定的，必须要在项目根目录创建一个文件夹： custom-tab-bar，以及对应的文件，文件夹名称不要拼错，否则自定义的组件无法引用。

custom-tab-bar/index.wxml

<view class="tab-bar" style='height:{
   
   {100}}rpx;'>
    <view wx:for="{
   
   {list}}" wx:key="index" class="tab-bar-item" data-path="{
   
   {item.pagePath}}" data-index="{
   
   {index}}" bindtap="switchTab">
    <image wx:if="{
   
   {item.isSpecial != null && item.isSpecial == true}}" src="{
   
   {item.iconPath}}" class='centerImage'></image>
    <image wx:else class='cover-image' src="{
   
   {selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view class="coverStyle" style="color: {
   
   {selected === index ? selectedColor : color}}">{
   
   {item.text}}</view>
  </view>  
</view>

custom-tab-bar/index.js

// custom-tab-bar/index.js
const app = getApp();
Component({
  data: {
    selected: 0,
    color: "#333",
    selectedColor: "#236BC1",
    list: [
    {
      "pagePath": "../map/map",
      "iconPath": "../img/tab_home_nor.png",
      "selectedIconPath": "../img/tab_home_sld.png",
      "text": "首页",
      "isSpecial": false
    },
    {
      "pagePath": "../cafe/cafe",
      "iconPath": "../img/tab_coffee_nor.png",
      "selectedIconPath": "../img/tab_coffee_sld.png",
      "text": "cafe",
      "isSpecial": false
    },
    {
      "pagePath": "../main/main",
      "iconPath": "../img/tab_scan.png",
      "selectedIconPath": "../img/tab_scan.png",
      "text": " ",
      "isSpecial": true
    },
    {
      "pagePath": "../record/record",
      "iconPath": "../img/tab_bill_nor.png",
      "selectedIconPath": "../img/tab_bill_sld.png",
      "text": "订单",
      "isSpecial": false
    },
    {
      "pagePath": "../mine/mine",
      "iconPath": "../img/tab_user_nor.png",
      "selectedIconPath": "../img/tab_user_sld.png",
      "text": "我的",
      "isSpecial": false
    }
  ],
    //适配IphoneX的屏幕底部横线
    // isIphoneX: app.globalData.isIphoneX
  },
  attached() {},
  methods: {
    switchTab(e) {
      console.log("e",e)
      const dataset = e.currentTarget.dataset
      const path = dataset.path
      const index = dataset.index
      //如果是特殊跳转界面
      if (this.data.list[index].isSpecial) {
        wx.navigateTo({
          url: path
        })
      } else {
        console.log(path,index)
        //正常的tabbar切换界面
        wx.switchTab({
          url: path
        })
        this.setData({
          selected: index
        })
      }
    }
  }
})

踩坑记录：按照文件位置，pagePath应该是../pages/main/main，但是在我的项目中，直接跳过了pages，进入mian画面，所以各位应该根据自己的项目去引用；

custom-tab-bar/index.json

{
  "component": true
}

custom-tab-bar/index.wxss

/* custom-tab-bar/index.wxss */
.tab-bar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 120rpx;
  /* background: white; */
  display: flex;
  flex-direction: row;
  /* padding-bottom: env(safe-area-inset-bottom); */
  background-image: url(data:image/png;base64,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);
  background-repeat:no-repeat;
  background-size: cover;
}

.tab-bar-border {
  /* background-color: #e4e4e4; */
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 18rpx;
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 16rpx;
  /* background:#fff; */
}

.cover-image {
  width: 46rpx;
  height: 46rpx;
}

.coverStyle{
  font-size: 22rpx;
}

.centerImage {
  width: 130rpx;
  height: 130rpx;
  position: absolute;
  top: -50rpx;
  border-radius: 50%;
  /* border: 6rpx solid #fff; */
}

踩坑记录：底部tabbar是一个不规则的白色背景，代码实现较困难，所以让ui切了一个异性背景，用background-image引入，结果报错了：

报错原因：微信小程序通过background-image设置背景：只支持线上图片和base64图片，不支持本地图片。

在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本，再引入。

三、开发者工具版本问题

最后出现了一个奇葩的问题：本不该出现自定义tabbar的次页面也出现了tabbar，检查代码发现没有问题，于是尝试在手机上预览，奇葩的问题果然消失了，猜测有可能是微信开发者工具的版本问题，于是将调试基础库提升了一个版本，问题解决啦~哈哈哈哈

以上就是本次自定义tabbar的实现过程，效果是不是还不错，点个赞再走吧~

小程序自定义tabbar踩坑笔记

猜你喜欢