在官方的文档中并没有关于Tab的组件介绍，所以得自己加工一下，先看看最终效果：
Untitled.gif
OK，没什么好说的，直接上代码
.js
// orders.js
Page({
/**
* 页面的初始数据
*/
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
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
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">待发货</view>
<view class="{{selected2?'red':'default'}}" bindtap="selected2">待收货</view>
<view class="{{selected3?'red':'default'}}" bindtap="selected3">待评价</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
