直接上代码：
axml:
<view class="listframe">
<view class="{{reservationShow1}}" >
<view class="{{reservationShow}}" onTap="reservationShow">预定记录</view>
</view>
<view class="{{refundShow1}}">
<view class="{{refundShow}}" onTap="refundShow">退款记录</view>
</view>
</view>
<view class="pagefy" a:if="{{isShow1}}">
<scroll-view scroll-y="true" style="height: 540rpx;width:100%;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view class="table">
<view class="table-tr">
<view class="table-th">序号</view>
<view class="table-th">订餐时间</view>
<view class="table-th">定餐类型</view>
<view class="table-th">价格</view>
</view>
<view class="table-tr" a:for="{{list}}">
<view class="table-td">{{++index}}</view>
<view class="table-td">{{item.starttime}}->{{item.endtime}}</view>
<view class="table-td">
{{item.kind}}
</view>
<view class="table-td">{{item.price}}</view>
</view>
</scroll-view>
</view>
<view class="pagefy" a:if="{{isShow2}}">
<scroll-view scroll-y="true" style="height: 540rpx;width:100%;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view class="table">
<view class="table-tr">
<view class="table-th">序号</view>
<view class="table-th">订餐时间</view>
<view class="table-th">定餐类型</view>
<view class="table-th">价格</view>
<view class="table-th">退订</view>
</view>
<view class="table-tr" a:for="{{list}}">
<view class="table-td">{{++index}}</view>
<view class="table-td">{{item.starttime}}->{{item.endtime}}</view>
<view class="table-td">
{{item.kind}}
</view>
<view class="table-td">{{item.price}}</view>
<view class="table-td">
<button class='btn' open-type='openSetting' onTap="refund">
<view class="ydtd">确实</view>
</view>
</button>
</view>
</view>
</scroll-view>
</view>
js:
data: {
reservationShow : 'yd',
refundShow : 'tk',
reservationShow1 : 'yuding',
refundShow1 : 'tuikuan',
isShow1: true,
isShow2: false,
list:[
{starttime:"1",endtime:"2",kind:"22",price:"22"},
{starttime:"3",endtime:"3",kind:"22",price:"23"},
{starttime:"1",endtime:"2",kind:"22",price:"22"},
{starttime:"3",endtime:"3",kind:"22",price:"23"},
{starttime:"1",endtime:"2",kind:"22",price:"22"},
{starttime:"3",endtime:"3",kind:"22",price:"23"},
{starttime:"1",endtime:"2",kind:"22",price:"22"},
{starttime:"3",endtime:"3",kind:"22",price:"23"}
],
},
reservationShow(){
this.setData({
reservationShow : 'yd',
refundShow : 'tk',
reservationShow1 : 'yuding',
refundShow1 : 'tuikuan',
isShow1: false,
isShow2: true
})
},
refundShow(){
this.setData({
reservationShow : 'yd1',
refundShow : 'tk1',
reservationShow1 : 'yuding1',
refundShow1 : 'tuikuan1',
})
},
acss:
.listframe{
height: 4%;
/* background-color: rgb(194, 75, 75); */
margin-top: 2%;
}
.yuding{
background-color:rgb(0,115,95);
width:36%;
height:60rpx;
border-radius: 24rpx;
text-align: center;
margin-left: 8%;
float:left;
}
.yd{
margin-top: 10rpx;
font-size:34rpx;
font-family:'黑体';
color:white;
text-align:center;
}
.tuikuan{
/* background-color:rgb(0,115,95); */
width:36%;
height:60rpx;
border-radius: 24rpx;
text-align: center;
margin-right: 8%;
float:right;
}
.tk{
margin-top: 10rpx;
font-size:34rpx;
font-family:'黑体';
color:rgb(0,115,95);
text-align:center;
}
.yuding1{
/* background-color:rgb(0,115,95); */
width:36%;
height:60rpx;
border-radius: 24rpx;
text-align: center;
margin-left: 8%;
float:left
}
.yd1{
margin-top: 10rpx;
font-size:34rpx;
font-family:'黑体';
color:rgb(0,115,95);;
text-align:center;
}
.tuikuan1{
background-color:rgb(0,115,95);
width:36%;
height:60rpx;
border-radius: 24rpx;
text-align: center;
margin-right: 8%;
float:right;
}
.tk1{
margin-top: 10rpx;
font-size:34rpx;
font-family:'黑体';
color:white;
text-align:center;
}
.pagefy{
margin-top:8%;
width: 96%;
margin-left: 3%;
}
.table {
margin-top:8%;
display: table;
width: 88%;
/* //合并边框 */
border-collapse: collapse;
box-sizing: border-box;
}
.table-tr {
/* //此元素会作为一个表格行显示（类似 <tr>） */
display: table-row;
height: 40px;
}
.table-th {
/* //此元素会作为一个表格单元格显示（类似 <td> 和 <th>） */
display: table-cell;
/* width: 24%; */
font-weight: bold;
border: 2px solid rgb(0,115,95);
/* box-shadow:0px 0px 1px 0px #aaa; */
text-align: center;
vertical-align: middle;
}
.table-td {
display: table-cell;
border: 2px solid rgb(0,115,95);
/* box-shadow:0px 0px 1px 0px #aaa; */
text-align: center;
vertical-align: middle;
}
运行结果：
说明：点击不同按钮切换为不同页面。