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

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

那么，如何实现页面切换功能，要使用，wx:for,scroll-view,swiper的功能在一起才能达成这个效果

 

wxml页面

  
    {{item.name}}
  



  

  
    
     
            预定时间: {{item.time}}
            当前状态：{{item.status}}          
    
    
  
 
  
   
    
            预定时间: {{item.time}}
            当前状态：{{item.status}}
    
    
  

首先,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;
}