1、说明

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

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

2.1、模板的制作

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

template.wxml：

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

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

app.js

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