微信小程序Tab切换实现

在官方的文档中并没有关于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

关联链接

微信小程序获取用户授权后的加密资料获取(PHP版本)