微信小程序tab（swiper）切换

　　　　　　　　　　 


<- wxml ->

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




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

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

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


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



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


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

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

        <view>
          <view style="background:url('../img/wyl015.png') no-repeat; background-size:100%;">
            <view class="Size">
              <text class="smallSize">￥</text>
              <view class="">
                <text>10元</text>
              </view>
            </view>
            <view>
              <text>满99元使用</text>
              <text>2018.3.29至2018.7.12s使用</text>
            </view>
          </view>
        </view>
    </view>
  </swiper-item>
  <!-- 已过期 -->
  <swiper-item>
    <view class="yohui_article youhui_article2">
        <view>
            <view style="background:url('../img/wyl016.png') no-repeat; background-size:100%;">
                  <view class="Size">
                    <text class="smallSize">￥</text>
                    <view class="">
                      <text>10元</text>
                    </view>
                  </view>
                  <view>
                    <text>满99元使用</text>
                    <text>2018.3.29至2018.7.12s使用</text>
                  </view>
            </view>
        </view>

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

        <view>
          <view style="background:url('../img/wyl016.png') no-repeat; background-size:100%;">
            <view class="Size">
              <text class="smallSize">￥</text>
              <view class="">
                <text>10元</text>
              </view>
            </view>
            <view>
              <text>满99元使用</text>
              <text>2018.3.29至2018.7.12s使用</text>
            </view>
          </view>
        </view>
    </view>
  </swiper-item>
</swiper>
<- 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