小程序中的tab切换

1、小程序中的tab切换应该是很常用的东西，于是记录一下进行分享

wxml代码

     

            资料

            交易

       

wxss代码

.swiper-tab{width:100%;text-align:center;height:85rpx;line-height:85rpx;display:flex;flex-flow:row;justify-content:space-around;color:#ccc;font-size:30rpx;border-bottom:1px solid #e1e1e1;/*position:fixed;top:0;left:0;background:#f7f7f7;z-index:100;*/}

.swiper-tab-item{width:100%;color:#a9a9a9}

.swiper-tab-item view{position:relative;display:inline}

.active view{border-bottom:3px solid #f65959;padding-bottom:18rpx}

.swiper-tab .swiper-tab-item.active{color:#f65959;font-size:30rpx;font-weight:700}

js代码

data中添加   currentTab:0,//资料交易切换按钮

//点击切换

  clickTab: function (e) {

    var that = this;

    if (that.data.currentTab === e.currentTarget.dataset.current) {

      return false;

    } else {

      that.setData({

        currentTab: e.currentTarget.dataset.current,

      })

    }

  },