第57讲静态订单查询tabs实现

tab事件逻辑，切换标题，异步后台获取数据，更改内容（暂未实现）

// pages/order/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        value:"全部订单",
        isActive:true
      },
      {
        id:1,
        value:"待付款",
        isActive:false
      },
      {
        id:2,
        value:"待收货",
        isActive:false
      },
      {
        id:3,
        value:"退款/退货",
        isActive:false
      },
    ]
  },

  /**
   * tab点击事件处理
   * @param {} e 
   */
  handleItemTap(e){
    const {index}=e.currentTarget.dataset;
    console.log(index)
    // 切换标题
    let {tabs}=this.data;
    tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);
    this.setData({
      tabs
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

<view class="tabs">
  <view class="tabs_title">
    <view
      bindtap="handleItemTap"
      data-index="{{index}}"
      wx:for="{{tabs}}"
      wx:key="id"
      class="title_item {{item.isActive?'active':''}}">
      {{item.value}}
    </view>
   
  </view>
  <view class="tabs_content">
    内容
  </view>
</view>

.tabs{
  .tabs_title{
    display: flex;
    .title_item{
      display: flex;
      justify-content: center;
      align-items: center;
      flex:1;
      padding: 15rpx 0;
    }
    .active{
      color: var(--themeColor);
      border-bottom: 5rpx solid currentColor;
    }
  }
  .tabs_content{

  }
}

{
  "usingComponents": {},
  "navigationBarTitleText": "订单查询"
}