小程序自定义tabbar—让你的小程序与众不同

前言

本篇文章将详细介绍微信小程序自定义tabbar的设置方法和注意事项，希望能够帮助广大开发者更好地开发和设计自己的微信小程序，实现更加个性化和独特的用户体验。

前言  

一、自定义tabbar设置的重要性  
二、怎么设置自定义tabbar呢  
    第一步，配置信息  
    第二步，添加tabBar代码文件  
    第三步，编写tabBar代码  
    第四步，使用tabBar  
三、注意事项

🔥 发本文章由猿梦_小星原创
📢 本文章主旨——讲解微信小程序自定义tabbar的设置方法和注意事项 🙏 希望这篇文章能够给您带来帮助，给小编点赞👍+关注🧡+收藏🚩+评论💬

一、自定义 tabbar 设置的重要性

微信小程序是一种新型的应用程序，可以在微信内部直接运行，无需下载和安装，具有轻量、易开发、易传播等特点。作为一种新型的应用形态，微信小程序在近几年已经得到广泛应用和推广。然而，微信小程序的开发规范和限制也给开发者带来了很多挑战，其中之一就是原生tabbar的限制。

默认情况下，微信小程序的底部导航栏（也称tabbar）是固定的，开发者无法更改其样式和布局，也无法实现更加个性化和独特的设计。为了解决这个问题，开发者可以选择自定义tabbar，从而实现更加灵活和自由的设计。

总之呢，自定义tabbar是一种非常实用的功能，可以让微信小程序更加美观、灵活、个性化，提高用户体验和差异化竞争力。

二、怎么设置自定义 tabbar 呢

首先，我们来看以下官方给我们的文档： 自定义 tabBar | 微信开放文档 (qq.com)

定眼一看，是不是一头雾水，接下来，跟随小编一起来进行保姆级操作吧！

第一步，配置信息

注：这一步的操作呢，是必须的，一呢，是需要指定以下custom 字段，二呢，是为了如果自定义tabbar没有显示，那么现在设置的将会被显示。

在app.json中编写代码，如下：

"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": true字段。

第二步，添加tabBar代码文件

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

在代码根目录下添加入口文件:

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

第三步，编写tabBar代码

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
}

第四步，使用tabBar

注：这里的给出的代码和官方给出的实例代码略有不同，区别在于，实例代码中所用的是Component组件生命周期，而我们常用的是page生命周期函数。

在每个tarbbar页面中的js文件下，添加如下代码：

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

即可大功告成，这里所写的都是最基本设置自定义tabBar的方法，用户可以根据自己的需求来设置样式等等。

三、注意事项

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

综上所述，小程序自定义tabbar需要注意以上这些事项，才能更好地实现自定义tabbar功能，提升用户体验。

关注小编，下期带你看市面上常见的自定义tabbar样式。