說明：頭部有一個三種預約狀態的切換

wxml頁面：

1. <!-- 切換欄 -->
2. <view class="swiper-tab">
3. <block wx:for="{{swipertab}}" wx:key="sptab">
4. <view class="swiper-tab-list {{currtab == item.index ? ‘on‘ : ‘‘}}" data-current="{{item.index}}" bindtap="tabSwitch">{{item.name}}</view>
5. </block>
6. </view>
8. <swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px" bindchange="tabChange">
9. <!-- 完成 -->
10. <swiper-item>
11. <scroll-view class="hot-box" scroll-y="true">
12. <view class="orderDetails" wx:for="{{alreadyOrder}}" wx:key=" ">
13. <view class="orderListTitle">
14. <text class="userName">{{item.name}}</text>
15. <text class="orderStatus">{{item.state}}</text>
16. </view>
17. <view class="orderListDetails">
18. <view class="productImg">
19. <image src="{{item.url}}" background-size="cover"></image>
20. </view>
21. <view class="productInfo">
22. <view class="productTitle">預定時間: {{item.time}}</view>
23. <text class="productPrice">當前狀態：{{item.status}}</text>
24. </view>
25. </view>
26. <view class="productCount">
27. <view>
28. <text>合計：￥{{item.money}}</text>
29. </view>
30. </view>
31. </view>
32. </scroll-view>
33. </swiper-item>
34. <!-- 待付款 -->
35. <swiper-item>
36. <scroll-view class="hot-box" scroll-y="true">
37. <view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key=" ">
38. <view class="orderListTitle">
39. <text class="userName">{{item.name}}</text>
40. <text class="orderStatus">{{item.state}}</text>
41. </view>
42. <view class="orderListDetails">
43. <view class="productImg">
44. <image src="{{item.url}}" background-size="cover"></image>
45. </view>
46. <view class="productInfo">
47. <view class="productTitle">預定時間: {{item.time}}</view>
48. <text class="productPrice">當前狀態：{{item.status}}</text>
49. </view>
50. </view>
51. <view class="productCount">
52. <view>
53. <text>合計：￥{{item.money}}</text>
54. </view>
55. </view>
56. </view>
57. </scroll-view>
58. </swiper-item>
59. <!-- 取消 -->
60. <swiper-item>
61. <scroll-view class="hot-box" scroll-y="true">
62. <view class="orderDetails" wx:for="{{lostOrder}}" wx:key=" ">
63. <view class="orderListTitle">
64. <text class="userName">{{item.name}}</text>
65. <text class="orderStatus">{{item.state}}</text>
66. </view>
67. <view class="orderListDetails">
68. <view class="productImg">
69. <image src="{{item.url}}" background-size="cover"></image>
70. </view>
71. <view class="productInfo">
72. <view class="productTitle">預定時間: {{item.time}}</view>
73. <text class="productPrice">當前狀態：{{item.status}}</text>
74. </view>
75. </view>
76. <view class="productCount">
77. <view>
78. <text>合計：￥{{item.money}}</text>
79. </view>
80. </view>
81. </view>
82. </scroll-view>
83. </swiper-item>
85. </swiper>

wxss樣式：

1. /*切換欄*/
2. .swiper-tab {
3. height: 40px;
4. line-height: 40px;
5. background: #3B3B3B;
6. color:#fff ;
7. display: flex;
8. position: relative;
9. z-index: 2;
10. flex-direction: row;
11. justify-content: center;
12. align-items: center;
13. border-bottom:1px solid black;
14. }
16. .swiper-tab-list {
17. margin: 0 30px;
18. padding: 0 4px;
19. font-size: 15px;
20. }
22. .on {
23. border-bottom:2px solid #fff;
24. color: #f5f5f5;
25. }
27. .navTopList {
28. display: flex;
29. width: 100%;
30. height: 70rpx;
31. background: #fff;
32. border-bottom: 1rpx solid #BEBEBE ;
33. margin-top:5px;
34. }
36. .navTopList .order-info {
37. text-align: center;
38. }
40. .navTopList .order-info view {
41. width: 56rpx;
42. height: 56rpx;
43. margin-left: 31rpx;
44. }
46. .navTopList .order-info text {
47. font-size: 34rpx;
48. }
50. .navTopList .order-info text.active {
51. color: #ff6662;
52. }
54. .navTopList .ywc,.navTopList .dfk,.navTopList .yqx {
55. flex: 1;
56. }
59. /*訂單列表*/
60. .orderDetails {
61. background: #fff;
62. border-bottom: 20rpx solid #f5f5f5;
63. }
65. .orderListTitle {
66. height: 100rpx;
67. line-height: 100rpx;
68. border-bottom: 1rpx solid #BEBEBE;
69. }
71. .orderListTitle .userName {
72. padding-right: 50rpx;
73. margin-left:10px;
74. }
76. .orderListTitle .orderStatus {
77. float: right;
78. margin-right: 20rpx;
79. color: #2f7b27;
80. font-size: 34rpx;
81. }
83. .orderListDetails {
84. display: flex;
85. height: 200rpx;
86. border-bottom: 1rpx solid #f3f3f3;
87. }
89. .orderListDetails .productImg {
90. flex: 1;
91. height:180rpx;
92. width:120px;
93. margin-top: 20rpx;
94. margin-left: 20rpx;
95. }
97. .orderListDetails .productImg image {
98. width: 100px;
99. height: 90%;
100. }
102. .orderListDetails .productInfo {
103. flex: 4;
104. margin: 40rpx 10px 20px 30rpx;
105. font-size:15px;
107. }
109. .orderListDetails .productInfo .productTitle {
110. font-size:15px;
111. overflow: hidden;
112. display: -webkit-box;
113. -webkit-line-clamp: 2;
114. -webkit-box-orient: vertical;
115. margin-bottom:10px;
116. }
118. .productCount {
119. height: 80rpx;
120. line-height: 80rpx;
121. border-bottom: 1rpx solid #f3f3f3;
122. }
124. .productCount>view {
125. float: right;
126. margin-right: 30rpx;
127. }

js：主要是在data中給切換欄配置參數，和默認顯示第幾個欄；

1. // pages/order/order.js
2. Page({
4. /**
5. * 頁面的初始數據
6. */
7. data: {
8. currtab: 0,
9. swipertab: [{ name: ‘已完成‘, index: 0 }, { name: ‘待付款‘, index: 1 }, { name: ‘已取消‘, index: 2 }],
10. },
12. /**
13. * 生命周期函數--監聽頁面加載
14. */
15. onLoad: function (options) {
17. },
18. /**
19. * 生命周期函數--監聽頁面初次渲染完成
20. */
21. onReady: function () {
22. // 頁面渲染完成
23. this.getDeviceInfo()
24. this.orderShow()
25. },
27. getDeviceInfo: function () {
28. let that = this
29. wx.getSystemInfo({
30. success: function (res) {
31. that.setData({
32. deviceW: res.windowWidth,
33. deviceH: res.windowHeight
34. })
35. }
36. })
37. },
39. /**
40. * @Explain：選項卡點擊切換
41. */
42. tabSwitch: function (e) {
43. var that = this
44. if (this.data.currtab === e.target.dataset.current) {
45. return false
46. } else {
47. that.setData({
48. currtab: e.target.dataset.current
49. })
50. }
51. },
53. tabChange: function (e) {
54. this.setData({ currtab: e.detail.current })
55. this.orderShow()
56. },
58. orderShow: function () {
59. let that = this
60. switch (this.data.currtab) {
61. case 0:
62. that.alreadyShow()
63. break
64. case 1:
65. that.waitPayShow()
66. break
67. case 2:
68. that.lostShow()
69. break
70. }
71. },
72. alreadyShow: function(){
73. this.setData({
74. alreadyOrder: [{ name: "躍動體育運動俱樂部(圓明園店)", state: "交易成功", time: "2018-09-30 14:00-16:00", status: "已結束", url: "../../images/bad0.png", money: "132" }, { name: "躍動體育運動俱樂部(圓明園店)", state: "交易成功", time: "2018-10-12 18:00-20:00", status: "未開始", url: "../../images/bad3.jpg", money: "205" }]
75. })
76. },
78. waitPayShow:function(){
79. this.setData({
80. waitPayOrder: [{ name: "躍動體育運動俱樂部(圓明園店)", state: "待付款", time: "2018-10-14 14:00-16:00", status: "未開始", url: "../../images/bad1.jpg", money: "186" }],
81. })
82. },
84. lostShow: function () {
85. this.setData({
86. lostOrder: [{ name: "躍動體育運動俱樂部(圓明園店)", state: "已取消", time: "2018-10-4 10:00-12:00", status: "未開始", url: "../../images/bad1.jpg", money: "122" }],
87. })
88. },
91. /**
92. * 生命周期函數--監聽頁面顯示
93. */
94. onShow: function () {
96. },
98. /**
99. * 生命周期函數--監聽頁面隱藏
100. */
101. onHide: function () {
103. },
105. /**
106. * 生命周期函數--監聽頁面卸載
107. */
108. onUnload: function () {
110. },
112. /**
113. * 頁面相關事件處理函數--監聽用戶下拉動作
114. */
115. onPullDownRefresh: function () {
117. },
119. /**
120. * 頁面上拉觸底事件的處理函數
121. */
122. onReachBottom: function () {
124. },
126. /**
127. * 用戶點擊右上角分享
128. */
129. onShareAppMessage: function () {
131. }
132. })

微信小程序訂單頁面