小程序自定义底部导航（tabbar）

前言：

小程序是一种轻便快速的应用程序开发方式，但是默认的底部tabbar在设计和实用性上存在一些限制。所以，本文将介绍如何自定义底部tabbar，帮助开发者在设计和用户体验上更加自由和灵活。

思路：

我们可以通过自定义页面的方式来实现底部tabbar的自定义。具体来说，我们需要进行以下步骤：

1. 创建自定义tabbar组件
2. 在app.json中声明自定义tabbar
3. 在需要使用底部tabbar的页面进行引用

具体实现步骤：

1. 创建自定义tabbar组件

在小程序项目中创建一个名为tabbar的自定义组件，该组件需要有自己的样式和功能。在创建自定义tabbar组件时，应注意以下点：

a. 组件中应该包含所有需要的tab项，每个tab项应至少包含一个图标和一个标题。
b. tab项可以使用默认图标和选中图标来表示选中/未选中状态。
c. 将tab项中的所有事件绑定到组件的事件处理程序中，以实现选项卡点击事件和其他自定义行为。

以下是自定义tabbar组件的示例代码：

<viewclass="tabbar"><viewwx:for="{{tabs}}"wx:key="id"class="tabbar-item"bindtap="onTabItemTap"data-index="{{index}}"><imageclass="tabbar-item-icon"src="{{item.icon}}"></image><textclass="tabbar-item-title">{{item.title}}</text></view></view>

在tabbar组件的JS文件中，我们需要定义组件的初始状态和选项卡点击事件处理程序。如下所示：

Component({properties:{tabs:{type: Array,value:[]},activeIndex:{type: Number,value:0}},data:{},methods:{onTabItemTap:function(event){let index = event.currentTarget.dataset.index;this.setData({activeIndex: index
      });this.triggerEvent('tabchange', index);}}})

2. 在app.json中声明自定义tabbar

在app.json文件中，我们需要声明我们的自定义tabbar。具体来说，我们需要配置tabBar项中的自定义tabbar路径和样式。如下所示：

"tabBar":{"custom":true,"color":"#999","selectedColor":"#09bb07","backgroundColor":"#fff","list":[{"text":"首页","iconPath":"images/tabbar/home.png","selectedIconPath":"images/tabbar/home-active.png","pagePath":"pages/index/index"}]}

其中，我们需要将custom属性设置为true，表示使用自定义tabbar，然后设置我们自定义的tabbar颜色、选中颜色和背景色。接下来创建一个包含所有选项卡的list数组，每个选项卡都具有相应的文本、图标、选中图标和页面路径。

3. 在需要使用底部tabbar的页面进行引用

在需要使用底部tabbar的页面的wxml文件中，我们需要直接引用我们之前自定义的组件标签，然后传递对应参数即可，如下所示：

<tabbartabs="{{tabs}}"activeIndex="{{activeIndex}}"bind:tabchange="onTabChange"></tabbar>

在页面的JS文件中，我们需要定义页面的tabBar对象，然后在onTabChange函数中更新该对象的selected属性。如下所示：

Page({onLoad:function(){let tabBar =this.getTabBar();let activeIndex = tabBar.list.findIndex(item=>{return item.pagePath ===this.route
    });this.setData({tabs: tabBar.list,activeIndex: activeIndex
    });},onTabChange:function(event){let tabBar =this.getTabBar();
    tabBar.selected = event.detail;}})

总结：

综上，我们就完成了一套简单的自定义tabbar组件。我们可以根据需求进一步封装组件，丰富其功能和样式，以实现更好的用户体验，让我们在小程序开发中更加自由和灵活。本文介绍了自定义底部tabbar的具体实现步骤，希望能对小程序的开发者有所帮助。

闭坑指南：

1. 注意在使用自定义组件时要注意属性的大小写和类型是否一致。
2. 注意在小程序不同版本中声明tabBar的格式可能存在差异，建议查看官方文档进行配置。
3. 在自定义组件中的事件名不能使用小驼峰命名法，如bindTabItemTap，只能使用bindtabitemtap。