关于微信小程序:微信小程序四绝对不可错过切换自定义菜单栏的骚操作

在开发小程序的时候，个别的小程序用官网自带的菜单栏就够了，但一但略微简单的小程序可能因为产品经理的一句“页面太多了得加个菜单”，就可能要对菜单栏进行增、删、改的操作，这个时候自带的就满足不了需要了，能够应用官网提供的自定义菜单栏。

但官网提供的自定义菜单栏有个特点，就是菜单栏的页面必须是 Component，如果你是在我的项目做到一半的时候有要对菜单栏进行增、删、改的需要，用官网提供自定义菜单栏就须要把 page 页面改成 Component，那就须要很多工夫批改页面逻辑，会很麻烦。

所以这个时候，咱们就 能够采纳官网自带的菜单栏和本人封装的菜单栏组合应用，这样能节俭批改逻辑的工夫，还能享受自带菜单的良好交互。

咱们能够用小程序自带的菜单和咱们本人封装的自定义菜单组件应用，具体逻辑是这样的：

咱们先能够在全局 app.js 文件的全局变量 globalData 里定义一个辨别展现自定义菜单还是官网自带菜单的变量 tabbar_type
通过 tabbar_type 在每个菜单页面辨别展现官网自带的菜单栏还是本人封装的自定义菜单栏
当展现自定义菜单栏的时候调用官网提供的 api 暗藏官网自带的菜单栏。当展现官网菜单栏的时候，通过批改全局变量 tabbar_type 的值来暗藏自定义菜单栏

先在 app.json 页面配置好官网自带的菜单栏

  "tabBar": {
    "custom": false,
    "color": "#999999",
    "selectedColor": "#00C3B3",
    "borderStyle": "black",
    "backgroundColor": "#f8f8f8",
    "list": [
      {
        "selectedIconPath": "/assets/img/homeActive.png",
        "iconPath": "/assets/img/home.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "/assets/img/mallActive.png",
        "iconPath": "/assets/img/mall.png",
        "pagePath": "pages/index/index",
        "text": "商城"
      },

      {
        "selectedIconPath": "/assets/img/myActive.png",
        "iconPath": "/assets/img/my.png",
        "pagePath": "pages/index/index",
        "text": "我的"
      }
    ]
  },

而后封装一个自定义的菜单栏组件

目录构造：

+ components
  + shoping-tabbar
    - index.js
    - index.json
    - index.wxml
    - index.wxss

index.js 文件代码

// components/shoping-tabbar/index.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    selected: {
      type: Number,
      default: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    selectedIndex: 0,
    color: "#999999",
    selectedColor: "#00C3B3",
    list: [
      {
        "selectedIconPath": "/assets/img/mallActive.png",
        "iconPath": "/assets/img/mall.png",
        "pagePath": "/pages/index/index",
        "text": "商城"
      },
      {
        "selectedIconPath": "/assets/img/cartActive.png",
        "iconPath": "/assets/img/cart.png",
        "pagePath": "/pages/index/index",
        "text": "购物车"
      },
      {
        "selectedIconPath": "/assets/img/orderActive.png",
        "iconPath": "/assets/img/order.png",
        "pagePath": "/pages/index/index",
        "text": "订单"
      }
    ]
  },

  attached: function () {
    this.setData({selectedIndex: this.properties.selected})
  },
  /**
   * 组件的办法列表
   */
  methods: {switchTab(e) {
      let data = e.currentTarget.dataset
      let url = data.path
      wx.redirectTo({
        url,
        fail: function (err) {
          wx.switchTab({url})
        },
        success: () => {
          this.setData({selectedIndex: data.index})
        }
      })
      wx.hideTabBar({
        animation: false,
        success: () => {app.globalData.tabbar_type = 2}
      })
    }
  },
})

index.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="{{selectedIndex === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view style="color: {{selectedIndex === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

而后在须要自定义菜单组件的页面引入

selected 为菜单的序号，比方成品成果动态图中的自定义菜单别离有商城、购物车、订单三个页面，序号别离为 1，2，3。

<nav-tabar selected="{{selected}}" wx:if="{{tabbar_type==2}}"></nav-tabar>

而后在自定义菜单栏页面（商城、购物车、订单）的 onShow() 办法里别离初始化是否显示菜单的变量

this.setData({tabbar_type: app.globalData.tabbar_type})

最初一步很要害，通过下面的成品成果动态图能够看到，从官网自带的菜单栏跳咱们封装的自定义菜单栏的页面，是通过商城这个页面直达的，这个页面比拟特地，它既是官网自带的菜单中的一个页面，又用了咱们本人封装的自定义菜单栏组件。

咱们能够通过官网提供的 onTabItemTap() 来监听，当展现官网菜单栏且点击这个 tab 页的时候就暗藏官网的菜单栏，展现本人封装的自定义菜单栏。

  /**
   * 以后是 tab 页时，点击 tab 时触发
   * @param {*} item 
   */
  onTabItemTap(item) {
    wx.hideTabBar({
      animation: false,
      success: () => {
        this.setData({tabbar_type: 2})
        app.globalData.tabbar_type = 2
      }
    })
  },

而后在这个直达页商城页的返回事件这样解决：暗藏本人封装的菜单栏，展现官网的菜单栏

  navToBack() {let pages = getCurrentPages();
    // 获取前一个页面的门路
    let prevpageHtml = pages[0].__displayReporter.showReferpagepath;
    wx.showTabBar({
      animation: true,
      success: () => {
        wx.switchTab({url: `/${prevpageHtml.substring(0, prevpageHtml.lastIndexOf('.html'))}`,
        })
        this.setData({tabbar_type: 1})
        app.globalData.tabbar_type = 1;
      }
    })

  },

用官网自带的菜单栏和本人封装的自定义菜单栏组合应用的益处就是既能享受官网自带菜单栏的敌对交互，有能把中途因需要起因改菜单栏需将 tabbar 页从 page 改成 component 的工夫省下。这样的骚操作在这种状况还是很可行的，哈哈。

话说工夫过得真快呀，再过 35 分钟就是下半年的第一天了，祝大家都有个好的下半场开始吧！

我是 AndyHu，目前临时是一枚前端搬砖工程师。

文中如有谬误，欢送在评论区斧正，如果这篇文章帮到了你，欢送点赞和关注呀😊

未经许可禁止转载💌

speak less，do more.

关于微信小程序:微信小程序四绝对不可错过切换自定义菜单栏的骚操作

前言

思路

成品成果

具体实现

总结

写在最初