微信小程序的开发过程中,总是有一个页面要点击切换不同内容的版块的需求,例如:
那么,如何实现页面切换功能,要使用,wx:for,scroll-view,swiper的功能在一起才能达成这个效果
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:2000rpx" >
<!-- 完成 -->
<swiper-item>
<scroll-view scroll-y>
<view wx:for="{{infor}}" wx:for-item="item">
<view >预定时间: {{item.time}}</view>
<text >当前状态:{{item.status}}</text>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y>
<view class="orderDetails" wx:for="{{infor1}}" wx:for-item="item">
<view >预定时间: {{item.time}}</view>
<text >当前状态:{{item.status}}</text>
</view>
</scroll-view>
</swiper-item>
</swiper>
首先,block是切换栏,swiper是跳转页面,scroll-view是展示页面,wx:for是具体的内容和参数
js页面
Page({
data: {
currtab: 0,
swipertab: [{ name: '已完成', index: 0 }, { name: '已取消', index: 1 }],
infor: [{time:1,status:1},{time:2,status:2}],
infor1: [{time:3,status:3},{time:4,status:4}],
},
onLoad() { },
tabSwitch: function (e) {
var that = this
if (this.data.currtab === e.target.dataset.current) {
return false
} else {
that.setData({
currtab: e.target.dataset.current
})
}
},
})
这里是对应的数据和功能实现
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: 12px;
}