微信小程序 wxml组件开发（四） 切换页面

微信小程序的开发过程中，总是有一个页面要点击切换不同内容的版块的需求，例如：

那么，如何实现页面切换功能，要使用，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;
}