微信小程序自定义tabbar底部菜单

Posted 2022-12-19 优小U

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

在自定义 tabBar 模式下，为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。

app.json 中添加 tabBar 字段：

"tabBar": 
  "custom": true,
  "color": "#666666",
  "selectedColor": "#FF5F15",
  "backgroundColor": "#ffffff",
  "borderStyle": "white",
  "list": [
    
      "pagePath": "pages/index/index",
      "text": "首页"
    ,
    
      "pagePath": "pages/service/service",
      "text": "服务"
    ,
    
      "pagePath": "pages/order/order",
      "text": "订单"
    ,
    
      "pagePath": "pages/user/user",
      "text": "我的"
    
  ]

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

添加自定义 tabBar 代码文件，在项目根目录添加入口文件:

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

这里我使用了 vant-weapp 的tabbar组件，所以需要先安装下vant：

npm install @vant/weapp

文件代码：

// custom-tab-bar/index.js
Component(
  data: 
    active: 0,
    list: [
	  
	    text: '首页',
	    url: 'pages/index/index',
	    icon: 'home',
	    activeIcon: 'home-select'
	  ,
	  
	    text: '服务',
	    url: 'pages/service/service',
	    icon: 'service',
	    activeIcon: 'service-select'
	  ,
	  
	    text: '订单',
	    url: 'pages/order/order',
	    icon: 'order',
	    activeIcon: 'order-select'
	  ,
	  
	    text: '我的',
	    url: 'pages/user/user',
	    icon: 'user',
	    activeIcon: 'user-select'
	  ,
	];
  ,
  methods: 
    onChange(event)  // 切换tab页面
      this.setData( active: event.detail );
      wx.switchTab(
        url: this.data.list[event.detail].url.startsWith('/')
          ? this.data.list[event.detail].url
          : `/$this.data.list[event.detail].url`,
      );
    ,

    init()  // 设置tab的active下标（icon）
      const page = getCurrentPages().pop();
      const route = page ? page.route.split('?')[0] : '';
      const active = this.data.list.findIndex(
        (item) =>
          (item.url.startsWith('/') ? item.url.substr(1) : item.url) ===
          `$route`,
      );
      this.setData( active );
    ,
  ,
);

// custom-tab-bar/index.json

  "component": true,
  "usingComponents": 
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  

<!-- custom-tab-bar/index.wxml -->
<van-tabbar 
  active=" active " 
  bind:change="onChange"
  inactive-color="#999999"
  active-color="#f35000"
>
  <van-tabbar-item class="custom-tab-bar-wrapper" custom-class="custom-tabbar-item" wx:for="list" wx:key="index">
    <iconfont slot="icon" name="item.icon" size="36"/>
    <iconfont slot="icon-active" name="item.activeIcon" size="36"/>
    <view class="text"> item.text </view>
  </van-tabbar-item>
</van-tabbar>

/* custom-tab-bar/index.wxss */
.custom-tab-bar-wrapper 
  display: flex;
  flex-direction: column;
  align-items: center;


.custom-tab-bar-wrapper .text 
  font-size: 24rpx;


.custom-tab-bar-wrapper .tab-icon 
  width: 40rpx;
  height: 40rpx;


.custom-tabbar-item 
  width: 100% !important;

在tabbar的page js中的onShow方法中加入：

// pages/service/service.js
onShow() 
  this.getTabBar().init() // 设置tabbar active状态
,

然后在微信开发者工具，【工具】-> 【构建npm】，重新编译。

tabbar中的图标是用的 iconfont 全局组件，详细使用参考另一篇博客：微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)