上圖：：：
導航模板內容頁面的定義：
<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
}],
注意不同頁面狀態開關的改變
這樣就可以簡單實現自定義下導航