微信小程序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 () {
    
  }
})





 

posted @ 2018-04-04 14:47  Faded露露  阅读(6689)  评论(0编辑  收藏  举报