微信小程序底部选项卡/导航栏实现方法

今天必须要写这篇文章，太坑了！微信小程序底部选项卡/导航栏的实现方法！
不过还是总结的说，就不说我经历了什么了。。
首先，在历经我一系列改革之后写出来的代码

//nav_tp.wxml
<template name="nav">
  <view class="nav_container">
    <navigator wx:for="{{navbar}}" data-idx="{{index}}" url="{{item.url}}" open-type="redirect" class="function-text {{currentTab==index ? 'present' : ''}}">{{item.name}}</navigator>
  </view>
</template>

//nav_tp.wxss
/*固定导航栏css*/

.nav_container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50px;
  padding: 0;
  /*看控制台发现padding不为0*/
  background-color: #e44;
  position: fixed;
  bottom: 0;
  text-align: center;
}

.function-text {
  padding: 0 10px;
  margin: 9px auto 7px;
  font-size: 20px;
  color: #fff;
  line-height: 32px;
}

.present {
  border-bottom: 2px solid #fff;
}

//common.js
var navbar=[
  {
    name: '发红包',
    url: "/pages/home/home"
  },
  {
    name: "抢红包",
    url: "/pages/snatch/snatch"
  },
  {
    name: "我的红包",
    url: "/pages/myPage/mine"
  }
]
//哎呀，这里之前写差一个s，然后一直拿不到数据，苦死我，广大网友别学我
module.exports = {
  navbar: navbar
}

然后再导入

//引用模板的js文件之一
var common=require("../common.js");

Page({
  data: {
    navbar: common.navbar,
    currentTab: 0//三个文件这里依次为0，1，2，其他地方一样
  }
})

//引用模板的css文件
 @import "../template/nav_tp.wxss"; 

//引用模板的html文件
<import src="../template/nav_tp.wxml"/>
<!--注意一定要在这里再传一次参数！！否则拿过来的信息是空的，因为渲染时没有拿到数据，而include不会渲染，相当于copy过来-->
<template is="nav" data="{{navbar,currentTab}}"></template> 

上面就是我实现的方法，然后不一会儿我就发现！！！小程序它已经帮我们写好这个东东了，只要在app.json中配置一下就ok了，你也可以看一下官网

//app.json
  "tabBar": {
    "borderStyle":"#e44",
    "backgroundColor":"#e44",
    "color":"#000",
    "selectedColor":"#ff0",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "发红包",
        "iconPath":"image/give.png",
        "selectedIconPath":"image/give-hl.png"
      },
      {
        "pagePath": "pages/snatch/snatch",
        "text": "抢红包",
        "iconPath": "image/snatch.png",
        "selectedIconPath": "image/snatch-hl.png"
      },
      {
        "pagePath": "pages/myPage/mine",
        "text": "我的红包",
        "iconPath": "image/mine.png",
        "selectedIconPath": "image/mine-hl.png"
      }
    ]
  }

不过要注意一点，从没有选项卡跳到有选项卡要用wx.switchTab。
ok，这个故事告诉我们要多看看API。