微信小程序自定义tabber

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、为什么要自定义tabber？

微信小程序是一种新型的应用程序，可以在微信内部直接运行，无需下载和安装，具有轻量、易开发、易传播等特点。作为一种新型的应用形态，微信小程序在近几年已经得到广泛应用和推广。然而，微信小程序的开发规范和限制也给开发者带来了很多挑战，其中之一就是原生tabbar的限制。
默认情况下，微信小程序的底部导航栏（也称tabbar）是固定的，开发者无法更改其样式和布局，也无法实现更加个性化和独特的设计。为了解决这个问题，开发者可以选择自定义tabbar，从而实现更加灵活和自由的设计。
总之呢，自定义tabbar是一种非常实用的功能，可以让微信小程序更加美观、灵活、个性化，提高用户体验和差异化竞争力。

二、怎么设置自定义tabbar

1.看一下官方的文档

自定义tabber

看完是不是一头雾水,那就跟着我一起来吧

第一步：配置数据

app.json中tabBar里设置 “custom”:true

 "tabBar": {
        "custom": true,
        "color": "#a5b5b5",
        "selectedColor": "#22cd5e",
        "borderStyle": "black" ,
        "list": [{
          "selectedIconPath": "images/tabBar/icon_1.png",
          "iconPath": "images/tabBar/icon_11.png",
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "selectedIconPath": "images/tabBar/icon_2.png",
          "iconPath": "images/tabBar/icon_22.png",
          "pagePath": "pages/messages/messages",
          "text": "消息"
        },{
          "selectedIconPath": "images/tabBar/icon_3.png",
          "iconPath": "images/tabBar/icon_33.png",
          "pagePath": "pages/lianPage/lianPage",
          "text": "我的"
        }
      ]
    },

第二步，添加tabBar代码文件

在根目录下创建custom-tab-bar文件夹，并创建名为index的component组件。
注意以下三点，否则自定义tabBar不会生效
1-必须是根目录下
2-且文件夹必须名为custom-tab-bar
3-文件夹下的component组件名必须为index

    custom-tab-bar/index.js
	custom-tab-bar/index.json
	custom-tab-bar/index.wxml
	custom-tab-bar/index.wxss

第二步代码和第三步代码在官方文档中给出的实例代码中复制即可

第三步，编写tabber代码

wxml

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

js

Component({
  data: {
    selected: 0,
    color: "#a5b5b5",
    selectedColor: "#22cd5e",
    list: [{
      pagePath: "/pages/index/index",
      iconPath: "/image/tabBar/icon_11.png",
      selectedIconPath: "/image/images/tabBar/icon_1.png",
      text: "首页"
    },{
      pagePath: "/pages/messages/messages",
      iconPath: "/image/tabBar/icon_22.png",
      selectedIconPath: "/image/tabBar/icon_2.png",
      text: "消息"
    }{
      pagePath: "/pages/lianPage/lianPage",
      iconPath: "/image/tabBar/icon_33.png",
      selectedIconPath: "/image/tabBar/icon_3.png",
      text: "我的"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})

wxss

.tab-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: white;
  display: flex;
  flex-direction: row;
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: auto;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
  }

json

{
  "component": true
}

根据自己的需求替换自己编写的tabber (上面代码可能少复制或者报错)

第四步，使用tabBar

//注：这里的给出的代码和官方给出的实例代码略有不同，区别在于，实例代码中所用的是Component组件生命周期，而我们常用的是page生命周期函数。
在每个tarbbar页面中的js文件下，添加如下代码：

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

注意事项

• 需要隐藏原生tabbar：在使用自定义tabbar之前，需要先隐藏原生tabbar，否则会出现两个tabbar的情况，影响用户体验。可以在 app.js 中的 onLaunch 方法中调用 wx.hideTabBar() 方法隐藏原生tabbar。
• 自定义样式需要符合设计规范：虽然自定义tabbar可以更加灵活和自由地设计样式和布局，但是需要遵守微信小程序的设计规范，否则可能会被审核不通过。
• 处理页面切换的逻辑：在自定义tabbar中，需要处理页面切换的逻辑，可以使用 wx.switchTab() 方法实现页面切换。需要注意的是，如果使用 wx.navigateTo() 或 wx.redirectTo() 方法，会新开一个页面，而不是切换到已有页面。
• 需要处理不同页面间的状态：在使用自定义tabbar时，需要处理不同页面间的状态，例如在购物车页面添加商品时，需要在我的页面的购物车图标上添加未读消息数量。可以使用小程序的事件总线或其他状态管理工具来实现跨页面状态管理。
• 兼容性问题：自定义tabbar可能会存在兼容性问题，需要在不同的设备和平台上进行测试，确保兼容性
• (查看我主页有自己定义的源码tabber)