微信小程序标签切换

wxml



    A
    B
    C




    
        
            {{item}}
        
    

wxss

.swiper-tab {
  display: flex;
  flex-direction: row;
  line-height: 60rpx;
  border-bottom: 2rpx solid #777;
}

.tab-item {
  width: 33.3%;
  text-align: center;
  font-size: 15px;
  color: rgb(235, 135, 135);
}

.swiper {
  width: 100%;
  font-size: 100rpx;
  height: 1140rpx;
  background: #dfdfdf;
}

.active {
  color: blue;
  border-bottom: 5rpx solid blue;
}

js

Page({
  data: {
    // tab切换
    currentTab: 0,
    tabs: "A", "B", "C",
  },
  swichNav: function (e) {
    // console.log(e);
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,
      });
    }
  },
  swiperChange: function (e) {
    // console.log(e);
    this.setData({
      currentTab: e.detail.current,
    });
  },
});

APPMB主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
APP模板网 » 微信小程序标签切换

发表评论

  • 2会员总数(位)
  • 1445资源总数(个)
  • 212本周发布(个)
  • 27 今日发布(个)
  • 1923稳定运行(天)

提供最优质的资源集合

立即查看 了解详情
 
咨询
QQ在线咨询