5、微信小程序学习: Tabbar的实现

1、底部TabBar的实现

"tabBar":{
"color":"#999999",
"selectedColor":"#000000",
"borderStyle":"black",
"backgroundColor": "#ffffff",
"list":[{
"pagePath":"pages/login/login",
"text":"相册",
"iconPath": "./assets/image/tab1_a.png",
"selectedIconPath": "./assets/image/tab1_b.png"
},{
"pagePath": "pages/orderlist/orderlist",
"text": "订单",
"iconPath": "./assets/image/tab2_a.png",
"selectedIconPath": "./assets/image/tab2_b.png"
}]
}

2、顶部TabBar的实现

<!--pages/orderlist/orderlist.wxml-->
<view class="swiper-tab">
<view class= "swiper-tab-list {{currentTab==0 ? 'on':''}}" data-current='0' bindtap='swichNav'>全部订单</view>
<view class="swiper-tab-list' {{currentTab==1 ? 'on':''}}" data-current='1' bindtap='swichNav'>待付款</view>
<view class="swiper-tab-list' {{currentTab==2 ? 'on':''}}" data-current='2' bindtap='swichNav'>待验收</view>
<view class="swiper-tab-list' {{currentTab==3 ? 'on':''}}" data-current='3' bindtap='swichNav'>待确认</view>
<view class="swiper-tab-list' {{currentTab==4 ? 'on':''}}" data-current='4' bindtap='swichNav'>已完成</view>
</view>

<swiper current='{{currentTab}}' class='swiper-box' duration='300' style='height:{{winHeight-31}}px' bindchange='bindchange'>
<swiper-item>1</swiper-item>
<swiper-item>2</swiper-item>
<swiper-item>3</swiper-item>
<swiper-item>4</swiper-item>
<swiper-item>5</swiper-item>

</swiper>

/* pages/orderlist/orderlist.wxss */
.swiper-tab {
width: 100%;
border-bottom: 2rpx solid #777777;
text-align: center;
line-height: 80rpx;
}
.swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: 20%;
color: #777777;
}
.on {
color: #da7c0c;
border-bottom:5rpx solid #da7c0c;
}
.swiper-box {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.swiper-box view {
text-align: center;
}

var app = getApp()
Page({
data: {
winWidth: 0,
winHeight: 0,
// tab切换
currentTab: 0,
},
onLoad: function () {
var that = this;
wx.getSystemInfo({

success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}

});
},
bindChange: function (e) {

var that = this;
that.setData({ currentTab: e.detail.current });

},
swichNav: function (e) {

var that = this;

if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
}
})