导航模板内容页面的定义：
<template name="naviBot">
<view class='navwrap t_cen font_26'>
<view id='nav1' class="navtab ">
<view><image class='nabimg' src="
{{navswiper[0].indflag? navswiper[0].navimg_:navswiper[0].navimg}}"></image></view>
<view class="{{
navswiper[0].indflag? 'col_g':'col_77' }}">{{navswiper[0].navtit}}</view>
</view>
<view id='nav2' class='navtab' bindtap='tocart'>
<view><image class='nabimg' src="{{
navswiper[1].cartflag? navswiper[1].navimg_:navswiper[1].navimg}}"></image></view>
<view class="{{
navswiper[1].cartflag? 'col_g':'col_77' }}">{{navswiper[1].navtit}}</view>
</view>
<view id='nav3' class='navtab' bindtap='tomine'>
<view><image class='nabimg' src="{{
navswiper[2].mineflag? navswiper[2].navimg_:navswiper[2].navimg}}"></image></view>
<view class="{{
navswiper[2].mineflag? 'col_g':'col_77' }}">{{navswiper[2].navtit}}</view>
</view>
</view>
</template>
首页面引入：
头部引入：
<import src = "../common/naviBot.wxml"/>
底部引入：
<view>
<template is="naviBot" data="{{navswiper}}" />
</view>
js部分：
将不同状体及切换开关统一定义到导航变量
不同的页面indflag/cartflag/mineflag/的状态不同
首页
navswiper: [{ navtit: '首页',
navimg: '../images/navind.png',
navimg_: '../images/navind_1.png',
indflag:true
}, {
navtit: '购物车',
navimg: '../images/navcart.png',
navimg_: '../images/navcart_1.png' ,
cartflag:false
}, {
navtit: '我的',
navimg: '../images/navmine.png',
navimg_: '../images/navmine_1.png',
mineflag:false
}],
我的页面
navswiper: [{
navtit: '首页',
navimg: '../images/navind.png',
navimg_: '../images/navind_1.png',
indflag:false
}, {
navtit: '购物车',
navimg: '../images/navcart.png',
navimg_: '../images/navcart_1.png',
cartflag:false
}, {
navtit: '我的',
navimg: '../images/navmine.png',
navimg_: '../images/navmine_1.png',
mineflag:true
}],
注意不同页面状态开关的改变
这样就可以简单实现自定义下导航