在官方的文檔中并沒有關(guān)于Tab的組件介紹，所以得自己加工一下，先看看最終效果：
Untitled.gif
OK，沒什么好說的，直接上代碼
.js
// orders.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
selected: true,
selected1: false,
selected2:false,
selected3:false,
selected4: false
},
selected: function (e) {
this.setData({
selected1: false,
selected2: false,
selected3: false,
selected4: false,
selected: true
})
},
selected1: function (e) {
this.setData({
selected: false,
selected2: false,
selected3: false,
selected4: false,
selected1: true
})
},
selected2: function (e) {
this.setData({
selected: false,
selected2: true,
selected3: false,
selected4: false,
selected1: false
})
},
selected3: function (e) {
this.setData({
selected: false,
selected2: false,
selected3: true,
selected4: false,
selected1: false
})
},
selected4: function (e) {
this.setData({
selected: false,
selected2: false,
selected3: false,
selected4: true,
selected1: false
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
.wxml
<view class="body">
<view class="nav bc_white">
<view class="{{selected?'red':'default'}}" bindtap="selected">待付款</view>
<view class="{{selected1?'red':'default'}}" bindtap="selected1">待發(fā)貨</view>
<view class="{{selected2?'red':'default'}}" bindtap="selected2">待收貨</view>
<view class="{{selected3?'red':'default'}}" bindtap="selected3">待評(píng)價(jià)</view>
<view class="{{selected4?'red':'default'}}" bindtap="selected4">退換貨</view>
</view>
<view class="{{selected?'show':'hidden'}}">for system</view>
<view class="{{selected1?'show':'hidden'}}">for activity1</view>
<view class="{{selected2?'show':'hidden'}}">for activity2</view>
<view class="{{selected3?'show':'hidden'}}">for activity3</view>
<view class="{{selected4?'show':'hidden'}}">for activity4</view>
</view>
.wxss
/* orders.wxss */
page{background-color:#f9f8f9;}
.nav{width:100%;height:100rpx;display:flex;flex-direction:row;}
.default{line-height:100rpx;text-align:center;flex:1;border-right:none;color:#5d5d5d;font-size:28rpx;}
.red{line-height:100rpx;text-align:center;color:#659F32;flex:1;border-right:none; border-bottom: 4rpx solid #659F32;font-size:28rpx;}
.show{display:block;text-align:center;line-height:200rpx;}
.hidden{display:none;text-align:center;line-height:200px;}
好了，搞定！
另外介紹一款在MAC OS 下非常好用的錄像工具LICEcap，比QQ 的好用多了，同樣的操作和大小，QQ 保存下來是2.1M，LICEcap 是29K，上百倍的差距！！！
image.png
