微信小程序tab（swiper）切换

　　　　　　　　　　

<- wxml ->

class="youhui">
  class="{{_num==0?'active':''}}" data-index='0' bindtap='toggle'>
    未使用
  
  class="{{_num==1?'active':''}}" data-index='1' bindtap='toggle'>
    已使用
  
  class="{{_num==2?'active':''}}" data-index='2' bindtap='toggle'>
    已过期
  





"{{_num}}" class="swiper-box" duration="200" bindchange="bindChange" style='min-height:645rpx'>
  
  
    class="yohui_article">
      
          "background:url('../img/wyl014.png') no-repeat; background-size:100%;">
                class="Size">
                  class="smallSize">￥
                  class="">
                    10元
                  
                
                
                  满99元使用
                  2018.3.29至2018.7.12s使用
                
                class="control">
                    去使用
                
          
      
      
        "background:url('../img/wyl014.png') no-repeat; background-size:100%;">
          class="Size">
            class="smallSize">￥
            class="">
              10元
            
          
          
            满99元使用
            2018.3.29至2018.7.12s使用
          
          class="control">
              去使用
          
        
      

      
        "background:url('../img/wyl014.png') no-repeat; background-size:100%;">
          class="Size">
            class="smallSize">￥
            class="">
              10元
            
          
          
            满99元使用
            2018.3.29至2018.7.12s使用
          
          class="control">
              去使用
          
        
      

       
        "background:url('../img/wyl014.png') no-repeat; background-size:100%;">
          class="Size">
            class="smallSize">￥
            class="">
              10元
            
          
          
            满99元使用
            2018.3.29至2018.7.12s使用
          
          class="control">
              去使用
          
        
      


       
        "background:url('../img/wyl014.png') no-repeat; background-size:100%;">
          class="Size">
            class="smallSize">￥
            class="">
              10元
            
          
          
            满99元使用
            2018.3.29至2018.7.12s使用
          
          class="control">
              去使用
          
        
      



       
        "background:url('../img/wyl014.png') no-repeat; background-size:100%;">
          class="Size">
            class="smallSize">￥
            class="">
              10元
            
          
          
            满99元使用
            2018.3.29至2018.7.12s使用
          
          class="control">
              去使用
          
        
      


       
        "background:url('../img/wyl014.png') no-repeat; background-size:100%;">
          class="Size">
            class="smallSize">￥
            class="">
              10元
            
          
          
            满99元使用
            2018.3.29至2018.7.12s使用
          
          class="control">
              去使用
          
        
      
    
  
  
  
    class="yohui_article youhui_article1">
        
            "background:url('../img/wyl015.png') no-repeat; background-size:100%;">
                  class="Size">
                    class="smallSize">￥
                    class="">
                      10元
                    
                  
                  
                    满99元使用
                    2018.3.29至2018.7.12s使用
                  
            
        

        
          "background:url('../img/wyl015.png') no-repeat; background-size:100%;">
            class="Size">
              class="smallSize">￥
              class="">
                10元
              
            
            
              满99元使用
              2018.3.29至2018.7.12s使用
            
          
        

        
          "background:url('../img/wyl015.png') no-repeat; background-size:100%;">
            class="Size">
              class="smallSize">￥
              class="">
                10元
              
            
            
              满99元使用
              2018.3.29至2018.7.12s使用
            
          
        
    
  
  
  
    class="yohui_article youhui_article2">
        
            "background:url('../img/wyl016.png') no-repeat; background-size:100%;">
                  class="Size">
                    class="smallSize">￥
                    class="">
                      10元
                    
                  
                  
                    满99元使用
                    2018.3.29至2018.7.12s使用
                  
            
        

        
          "background:url('../img/wyl016.png') no-repeat; background-size:100%;">
            class="Size">
              class="smallSize">￥
              class="">
                10元
              
            
            
              满99元使用
              2018.3.29至2018.7.12s使用
            
          
        

        
          "background:url('../img/wyl016.png') no-repeat; background-size:100%;">
            class="Size">
              class="smallSize">￥
              class="">
                10元
              
            
            
              满99元使用
              2018.3.29至2018.7.12s使用
            
          
        
    
  

<- wxss ->

.youhui{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  background-color: #fff;
  height:100rpx;
  font-size: 32rpx;
  border-top:1px solid #F0F0F0;
  border-bottom:1px solid #F0F0F0;
}
.youhui>view{
  display: flex;
  align-items: center;
}
.active{
  color: #DF2E26;
  border-bottom:3px solid #DF2E26;
}
/* 有优惠 */
.yohui_article{
  width: 100%;
}
.yohui_article>view{
  padding:15rpx 20rpx;
  box-sizing: border-box;
}
.yohui_article>view>view{
   min-height:185rpx; 
   display: flex;
   flex-direction: row;
   font-size: 28rpx;
   /* justify-content: space-between; */
   color: #fff;
   align-items: center;
}
.youhui_article1>view>view{
   color: #727272;
}
.youhui_article2>view>view{
   color: #FFF4F4;
}
.Size{
  display: flex;
  width: 27%;
  font-size:44rpx;
  align-items: baseline;
}
.smallSize{
  font-size: 28rpx;
  margin-left: 30rpx;
}
.yohui_article>view>view>view:nth-of-type(2){
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
}
.youhui_article1>view>view>view:nth-of-type(2){
 color:#8A8A8A;
}
.yohui_article>view>view>view:nth-of-type(2)>text:nth-of-type(1){
  font-size:38rpx;
  margin-bottom: 30rpx;
}
.control{
  margin-left:30rpx;
}
.control navigator{
  width:150rpx;
  height:55rpx;
  line-height:55rpx;
  background-color: #662727;
  text-align: center;
  border-radius: 6rpx;
}

<- js ->

let app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    state:0,
    _num:'0'
  },
   /** 
  * 点击tab切换 
  */
  toggle(e){
    console.log(e.currentTarget.dataset.index);
    if (this.data._num === e.currentTarget.dataset.index) {
      return false;
    } else {
      this.setData({
        _num: e.currentTarget.dataset.index
      })
    }



    // if (e.currentTarget.dataset.index=="0"){
    //   this.setData({
    //     state: 0,
    //     _num: e.target.dataset.index
    //   })
    // } else if (e.currentTarget.dataset.index == "1"){
    //   this.setData({
    //     state:1,
    //     _num: e.target.dataset.index
    //   })
    // } else if (e.currentTarget.dataset.index == "2"){
    //   console.log('已进入已过期');
    //   this.setData({
    //     state: 2,
    //     _num: e.target.dataset.index
    //   })
    // }
  },


  bindChange: function (e) {
    var that = this;
    console.log(e)
    that.setData({
       _num: e.detail.current
    });
    switch (e.detail.current) {
      case 0:
        that.data.state = 0
        break;
      case 1:
        that.data.state = 1
        break;
      case 2:
        that.data.state = 2
        break;
    }
    // wx.request({
    //   url: app.baseURL + 'act=member_invoice&op=mycomposegroup',
    //   data: {
    //     appid: app.appid,
    //     pagenums: "1",
    //     member_id: app.member_id,
    //     state: that.data.state
    //   },
    //   header: {
    //     'content-type': 'application/json' // 默认值
    //   },
    //   success: function (res) {
    //     app.allorders = res.data.datas.goods
    //     that.setData({
    //       list: res.data.datas.goods,
    //       height: res.data.datas.goods.length * 215
    //     })
    //   }
    // })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  }
})

 

转载于:https://www.cnblogs.com/dalulu/p/8717198.html