技術標籤：小程式小程式

小程式原生寫假資料渲染訂單頁+tab欄切換

html結構

在這裡插入程式碼片
```<!--pages/index/index.wxml-->

<!-- tab欄 -->

<view class="swiper-tab">
  <block wx:for="{{swipertab}}" wx:key="sptab">
    <view class="swiper-tab-list {{currtab == item.index ? 'on'
 
 : ''}}" data-current="{{item.index}}"
      bindtap="tabSwitch">{{item.name}}</view>
  </block>
</view>

<!-- 訂單 -->
<swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px"
 
 bindchange="tabChange">
  <!-- 完成 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{alreadyOrder}}" wx:key=" ">
        <view class="orderListTitle"
 
>
          <text class="userName">{{item.name}}</text>
          <text class="orderStatus">{{item.state}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productImg">
            <image src="{{item.url}}" background-size="cover"></image>
          </view>
          <view class="productInfo">
            <view class="productTitle">預定時間: {{item.time}}</view>
            <text class="productPrice">當前狀態：{{item.status}}</text>
          </view>
        </view>
        <view class="productCount">
          <view>
            <text>合計：￥{{item.money}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <!-- 待付款 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key=" ">
        <view class="orderListTitle">
          <text class="userName">{{item.name}}</text>
          <text class="orderStatus">{{item.state}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productImg">
            <image src="{{item.url}}" background-size="cover"></image>
          </view>
          <view class="productInfo">
            <view class="productTitle">預定時間: {{item.time}}</view>
            <text class="productPrice">當前狀態：{{item.status}}</text>
          </view>
        </view>
        <view class="productCount">
          <view>
            <text>合計：￥{{item.money}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <!-- 取消 -->
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{lostOrder}}" wx:key=" ">
        <view class="orderListTitle">
          <text class="userName">{{item.name}}</text>
          <text class="orderStatus">{{item.state}}</text>
        </view>
        <view class="orderListDetails">
          <view class="productImg">
            <image src="{{item.url}}" background-size="cover"></image>
          </view>
          <view class="productInfo">
            <view class="productTitle">預定時間: {{item.time}}</view>
            <text class="productPrice">當前狀態：{{item.status}}</text>
          </view>
        </view>
        <view class="productCount">
          <view>
            <text>合計：￥{{item.money}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>

</swiper>

css樣式

```css
/* pages/index/index.wxss */
/*切換欄*/
.swiper-tab {
  height: 40px;
  line-height: 40px;
  background: #3B3B3B;
  color: #fff;
  display: flex;
  position: relative;
  z-index: 2;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid black;
}

.swiper-tab-list {
  margin: 0 30px;
  padding: 0 4px;
  font-size: 15px;
}

.on {
  border-bottom: 2px solid #fff;
  color: #f5f5f5;
}

.navTopList {
  display: flex;
  width: 100%;
  height: 70rpx;
  background: #fff;
  border-bottom: 1rpx solid #BEBEBE;
  margin-top: 5px;
}

.navTopList .order-info {
  text-align: center;
}

.navTopList .order-info view {
  width: 56rpx;
  height: 56rpx;
  margin-left: 31rpx;
}

.navTopList .order-info text {
  font-size: 34rpx;
}

.navTopList .order-info text.active {
  color: #ff6662;
}

.navTopList .ywc,
.navTopList .dfk,
.navTopList .yqx {
  flex: 1;
}


/*訂單列表*/
.orderDetails {
  background: #fff;
  border-bottom: 20rpx solid #f5f5f5;
}

.orderListTitle {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #BEBEBE;
}

.orderListTitle .userName {
  padding-right: 50rpx;
  margin-left: 10px;
}

.orderListTitle .orderStatus {
  float: right;
  margin-right: 20rpx;
  color: #2f7b27;
  font-size: 34rpx;
}

.orderListDetails {
  display: flex;
  height: 200rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.orderListDetails .productImg {
  flex: 1;
  height: 180rpx;
  width: 120px;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.orderListDetails .productImg image {
  width: 100px;
  height: 90%;
}

.orderListDetails .productInfo {
  flex: 4;
  margin: 40rpx 10px 20px 30rpx;
  font-size: 15px;

}

.orderListDetails .productInfo .productTitle {
  font-size: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}

.productCount {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.productCount>view {
  float: right;
  margin-right: 30rpx;
}

js模組

// pages/order/order.js
Page({
 
  /**
  * 頁面的初始資料
  */
  data: {
  currtab: 0,
  swipertab: [{ name: '已完成', index: 0 }, 
  { name: '待付款', index: 1 }, 
  { name: '已取消', index: 2 },
  { name: '已完成', index: 3}],
  },
   
  /**
  * 生命週期函式--監聽頁面載入
  */
  onLoad: function (options) {
   
  },
  /**
  * 生命週期函式--監聽頁面初次渲染完成
  */
  onReady: function () {
  // 頁面渲染完成
  this.getDeviceInfo()
  this.orderShow()
  },
   
  getDeviceInfo: function () {
  let that = this
  wx.getSystemInfo({
  success: function (res) {
  that.setData({
  deviceW: res.windowWidth,
  deviceH: res.windowHeight
  })
  }
  })
  },
   
  /**
  * @Explain：選項卡點選切換
  */
  tabSwitch: function (e) {
  var that = this
  if (this.data.currtab === e.target.dataset.current) {
  return false
  } else {
  that.setData({
  currtab: e.target.dataset.current
  })
  }
  },
   
  tabChange: function (e) {
  this.setData({ currtab: e.detail.current })
  this.orderShow()
  },
   
  orderShow: function () {
  let that = this
  switch (this.data.currtab) {
  case 0:
  that.alreadyShow()
  break
  case 1:
  that.waitPayShow()
  break
  case 2:
  that.lostShow()
  break
  }
  },
  alreadyShow: function(){
  this.setData({
  alreadyOrder: [{ name: "vsp月會員+超級套餐+++++++", state: "交易成功", time: "2018-09-30 14:00-16:00", status: "已結束", url: "../../image/icon_01.jpg", money: "132" }, { name: "vsp月會員+超級套餐+++++++", state: "交易成功", time: "2018-10-12 18:00-20:00", status: "未開始", url: "../../image/icon_02.png", money: "205" }]
  })
  },
   
  waitPayShow:function(){
  this.setData({
  waitPayOrder: [{ name: "vsp月會員+超級套餐+++++++", state: "待付款", time: "2018-10-14 14:00-16:00", status: "未開始", url: "../../image/icon_03.jpg", money: "186" }],
  })
  },
   
  lostShow: function () {
  this.setData({
  lostOrder: [{ name: "vsp月會員+超級套餐+++++++", state: "已取消", time: "2018-10-4 10:00-12:00", status: "未開始", url: "../../image/icon_03.jpg", money: "122" }],
  })
  },
   
   
  /**
  * 生命週期函式--監聽頁面顯示
  */
  onShow: function () {
   
  },
   
  /**
  * 生命週期函式--監聽頁面隱藏
  */
  onHide: function () {
   
  },
   
  /**
  * 生命週期函式--監聽頁面解除安裝
  */
  onUnload: function () {
   
  },
   
  /**
  * 頁面相關事件處理函式--監聽使用者下拉動作
  */
  onPullDownRefresh: function () {
   
  },
   
  /**
  * 頁面上拉觸底事件的處理函式
  */
  onReachBottom: function () {
   
  },
   
  /**
  * 使用者點選右上角分享
  */
  onShareAppMessage: function () {
   
  }
  })