微信小程序（二）----------微信小程序自定义底部导航栏tabBar_微信小程序自定义底部tabbar

1、说明

微信提供的tabBar很好用，但是也有很多限制，不能直接监控点击事件，也不能做酷炫的底部导航栏，想要实现个性化的底部导航栏那就自己写一个吧。

2、自定义导航栏实现步骤

2.1、模板的制作

小程序提供的公共模板的使用，将模板写在<template name=""></template>标签里面，这个页面也要加在app.json的pages里面，值得一提的是，小程序中表达式在判断赋值和样式加载上的运用确实很方便。

template.wxml：

<template name="footer">
  <view class="tabBar">
    <block  wx:for="{
  {tabBarList}}" wx:key="{
  {itemx}}" wx:for-index="itemx" data-itemx="{
  {itemx}}">
      <view class="tabBar-item" bindtap="swichTabBar">
        <image src="{
  {currentTabBar==itemx ? item.selectedIconPath:item.iconPath}}"  mode="widthFix" class="tabBar-img"></image>
        <text class="tabBar-text {
  {currentTabBar==itemx ? 'active' : ''}}">{
  {item.text}}</text>
      </view>
    </block>
  </view> 
</template>

因为公共模板，所以参数最好在公共js里面管理，这里我用的全局变量管理模板参数。

app.js

App({
  globalData: {//全局变量
    currentTabBar:0,
    tabBar:{
      list: [
        {
          text: