微信小程序自定义底部导航栏！

00:00

wxml文件：

<text>自定义底部导航栏切换</text>

<view class='tabbarArray'>

<view wx:for=”{{tabbarArray}}” wx:key=”unique” data-idx='{{index}}' bindtap='tabbartap'>

<image src=”../../images/{{item.activeImg}}” wx:if=”{{tab==index}}”></image>

<image src=”../../images/{{item.img}}” wx:if=”{{tab!==index}}”></image>

<text>{{item.text}}</text>

</view>

</view>

<view wx:if=”{{tab == 0}}”>

0

</view>

<view wx:if=”{{tab == 1}}”>

1

</view>

<view wx:if=”{{tab == 2}}”>

2

</view>

<view wx:if=”{{tab == 3}}”>

3

</view>

js文件：

放到Page对象中：

data: {

tabbarArray: [

{ img: '01.png', activeImg: '01-1.png', text: 'home'},

{ img: '01.png', activeImg: '01-1.png', text: 'home'},

{ img: '01.png', activeImg: '01-1.png', text: 'home'},

{ img: '01.png', activeImg: '01-1.png', text: 'home'}

],

tab:0

},

tabbartap(e){

var that = this;

that.setData({

tab: e.currentTarget.dataset.idx

})

},

wxss文件：微信小程序使用flex布局可以可以起到兼容性的左右

.view-flex-column {

display: flex;

flex-direction: column;

align-items: center;

}

.tabbarArray {

display: flex;

flex-direction: row;

justify-content: space-around;

align-items: center;

}

.tabbarActive {

color:#ee244a;

}

当然从中可以引申出许多，可以知道tabbar切换的方式、还可以将这些功能写成组件，运用起来就会更方便！

喜爱我的文章就点个赞吧！请多关注！