<- 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 () { } })