说明：头部有一个三种预约状态的切换
wxml页面：
<!-- 切换栏 -->
<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>
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：主要是在data中给切换栏配置参数，和默认显示第几个栏；
// pages/order/order.js
Page({
/**
* 页面的初始数据
*/
data: {
currtab: 0,
swipertab: [{ name: '已完成', index: 0 }, { name: '待付款', index: 1 }, { name: '已取消', index: 2 }],
},
/**
* 生命周期函数--监听页面加载
*/
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: "跃动体育运动俱乐部(圆明园店)", 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" }]
})
},
waitPayShow:function(){
this.setData({
waitPayOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "待付款", time: "2018-10-14 14:00-16:00", status: "未开始", url: "../../images/bad1.jpg", money: "186" }],
})
},
lostShow: function () {
this.setData({
lostOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "已取消", time: "2018-10-4 10:00-12:00", status: "未开始", url: "../../images/bad1.jpg", money: "122" }],
})
},
})
