小程序：在当页点击不同按钮切换为不同页面

直接上代码：

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;

}

运行结果：

说明：点击不同按钮切换为不同页面。