小程序中的tab切换

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

wxml代码

      <view class="swiper-tab">

            <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab"><view>资料</view></view>

            <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab"><view>交易</view></view>

        </view>

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,

      })

    }

  },

推荐阅读更多精彩内容

  • 好久没有更新了,今天更新点东西。 大多数的商城类小程序都有这个功能,点击“全部订单”,“待付款”,“待发货”,“待...
    _vb阅读 548评论 0 2
  • // pages/logs/travel.js JS部分trag_daystr为数据 可根据自己需求改变 var ...
    悟空_大师兄_阅读 685评论 0 0
  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 3,109评论 0 6
  • 一、界面 1、主要界面:基本计算 2、扩展界面:单位计算 3、其它界面 房贷计算、正则表达式等,具体可扫码试用 二...
    潮湿的桥阅读 1,262评论 0 0
  • 星期五的下午,我们第一节课是社团课,王老师让我们带胶棒、树叶和树枝。我非常激动,上课以后,王老师让我们做《...
    史雨鑫阅读 48评论 0 0