微信小程序自定义下导航页面切换效果的合理写法

上图：：：

导航模板内容页面的定义：

<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

}],

 

注意不同页面状态开关的改变

这样就可以简单实现自定义下导航