[小程序]漂亮的可滑动TAB切换卡
  • xiele-淡墨
  • 2018-10-02
  • 前端


  • 代码片段:

    index.wxml
    <view class="swiper-tab gd-tab">
    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">未使用</view>
    <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">已使用</view>
    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">已过期</view>
    </view>
    <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" style='padding-top:40px;'>
    <swiper-item>
    未使用
    </swiper-item>
    <swiper-item>
    已使用
    </swiper-item>
    <swiper-item>
    已过期
    </swiper-item>
    </swiper>


    index.wxss
    .swiper-tab{
    width: 100%;
    border-bottom: 2rpx solid #ccc;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    font-size: 14px;
    }
    .swiper-tab-item{
    width: 30%;
    color:#434343;
    }
    .active{
    color:#F65959;
    border-bottom: 4rpx solid #F65959;
    }
    swiper{
    height: 80vh;
    }
    .gd-tab{
    position:fixed;
    top:0;
    z-index:999;
    background: #fff;
    }
    index.js
    let App = getApp();

    Page({

    /**
    * 页面的初始数据
    */
    data: {
    currentTab: 0,
    used: 0,//已使用
    noused: 0,//未使用
    enddate: 0, //已过期
    },
    //滑动切换
    swiperTab: function (e) {
    var that = this;
    that.setData({
    currentTab: e.detail.current
    });
    },
    //点击切换
    clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
    return false;
    } else {
    that.setData({
    currentTab: e.target.dataset.current
    })
    }
    },
    })




    评论
    • 评论功能已关闭