微信小程序自定义 tabbar

一定的需求情况下，无法使用小程序原生的 tabbar 的时候，需要自行实现一个和 tabbar 功能一模一样的自制组件。

查阅了海量的博客和文档之后，亲自踩坑。总结了三种在不使用微信小程序原生 tabbar 的情况下自制 tabbar 的方法。并说说这几种方法各自的特色。

类 navigator 跳转方式

类 navigator 跳转方式是我自己起的名称，因为它的实现思路就是这个样子的。期初参考 微信小程序自定义tabBar组件开发 这篇博文的思路。进行了这种方式的尝试，并为后续提供了解决思路。在这次实践的过程中使用了和该博文类似的目录结构。

template 文件主要包含了 tabbar 的内容、逻辑、模板、样式。
 

tabbar_template.js

//初始化数据
function tabbarinit() {
  return [
    {
      "current": 0,
      "pagePath": "/pages/travel_shop/travel/travel_index/travel_index",
      "iconPath": "/pages/img/tab_icon_home@2x.png",
      "selectedIconPath": "/pages/img/tab_icon_home_sel@2x.png",
      "text": "首页"
    },
    {
      "current": 0,
      "pagePath": "/pages/travel_shop/travel/travel_car/travel_car",
      "iconPath": "/pages/img/tab_icon_shop@2x.png",
      "selectedIconPath": "/pages/img/tab_icon_shop_sel@2x.png",
      "text": "购物车"
    },
    {
      "current": 0,
      "pagePath": "/pages/travel_shop/travel/travel_my/travel_my",
      "iconPath": "/pages/img/tab_icon_my@2x.png",
      "selectedIconPath": "/pages/img/tab_icon_my_sel@2x.png",
      "text": "我的"
    }
  ]

}
//tabbar 主入口
function tabbarmain(bindName = "tabdata", id, target) {
  var that = target;
  var bindData = {};
  var otabbar = tabbarinit();
  otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']   //换当前的icon
  otabbar[id]['current'] = 1;
  bindData[bindName] = otabbar
  that.setData({ bindData });
}

module.exports = {
  tabbar: tabbarmain
}

 

tabbar_template.wxml

<template name