小程序 tab栏切换

最新推荐文章于 2024-05-08 20:52:56 发布

郭玉齐

最新推荐文章于 2024-05-08 20:52:56 发布

阅读量240

点赞数

分类专栏：笔记文章标签：小程序

本文链接：https://blog.csdn.net/qq706352062/article/details/125780625

版权

笔记专栏收录该内容

113 篇文章 1 订阅

订阅专栏

wxml

<!-- tab -->
  <view class="oa_tab">
    <block wx:for="{{navList}}" wx:key="index">
      <view class="oa_tab_flex {{nav_type == index ? 'oa_tab_flex_on' : ''}}" catchtap="changeType" data-index="{{index}}">{{item}}</view>
    </block>
  </view>


js


data: {
    
    navList: ['全部', '待付款', '待收货', '待评价', '退款/售后'],
    nav_type: 0,
  },

 changeType: function (e) {
    let {
      index
    } = e.currentTarget.dataset;
    if (this.data.type === index || index === undefined) {
      return false;
    } else {
      this.setData({
        nav_type: index
      })
    }
  },


css


.oa_tab {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  display: flex;
  background: #000;
  align-items: center;
  justify-content: space-around;
}

.oa_tab_flex {
  /* flex: 1; */
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #E6E6E6;
}

.oa_tab_flex_on {
  font-size: 32rpx;
  color: #FBAB2A;
  position: relative;
}

.oa_tab_flex_on::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 80%;
  height: 6rpx;
  background: #FBAB2A;
  border-radius: 3rpx;
  left: 50%;
  transform: translateX(-50%);
}