tab选项卡

wxml:

<view class='content'>
  <view class='tab {{idx == index ? "type-item-on" : ""}}' data-index='{{index}}' catchtap='tab' wx:for='{{tab}}' wx:key='key'>{{item.title}}</view>
</view>
<view wx:if='{{idx == 0}}' class='tab1' data-id='0'>全部订单
</view>
<view wx:if='{{idx == 1}}' class='tab2' data-id='1'>待付款</view>
<view wx:if='{{idx == 2}}' class='tab3' data-id='2'>待收货</view>
<view wx:if='{{idx == 3}}' class='tab3' data-id='2'>交易完成</view>

wxss:

/* pages/my-order/my-order.wxss */
page {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.tab {
  width: 30%;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  background: #f0f0f0;
  padding: 5rpx;
  font-size: 30rpx;
}

.type-item-on {
  border-bottom: 4rpx solid #e64340;
  color: red;
}

.tab1 {
  width: 100%;
  height: 100%;
  /* background: orange; */
}

.tab2 {
  width: 100%;
  height: 100%;
  /* background: red; */
}

.tab3 {
  width: 100%;
  height: 100%;
  /* background: purple; */
}

js:

// pages/my-order/my-order.js
Page({

  /**
   * 页面的初始数据
   */
  data: {


    tab: [{
      title: '全部订单',
      id: 0
    },
    {
      title: '待付款',
      id: 1
    },
    {
      title: '待收货',
      id: 3
    },{
      title: '交易完成',
      id: 4
    },

    ],
    idx: 0, //默认选中第一项



  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {

  },

  // tab
  tab(e) {
    let that = this;
    let index = e.currentTarget.dataset.index;

    that.setData({
      idx: index,
    })

  },








  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})