微信小程序实现tab切换

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

嫣嫣细语

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

阅读量754

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/aaa123aaasqw/article/details/130628100

版权

微信小程序专栏收录该内容

77 篇文章 8 订阅

订阅专栏

1.实现效果

2.实现原理

循环一个数组，切换数据的时候根据index索引来动态的设置选中项，设置fixed定位，固定在顶部。

3.实现代码

<view class="hd">
  <block wx:for="{{navList}}" wx:key="navList">
    <view class="hd_flex {{nav_type == index ? 'hd_flex_on' : ''}}" catchtap="changeType" data-index="{{index}}">{{item}}</view>
  </block>
</view>

page {
  background: #F8F8F8;
  padding-bottom: 20rpx;
}

.hd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  display: flex;
  background: #fff;
}

.hd_flex {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}

.hd_flex_on {
  font-size: 30rpx;
  color: #FA871E;
  position: relative;
}

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

Page({


  data: {
    navList: ['正在进行', '即将开始', '已结束'],
    nav_type: 0,
  },
  changeType: function (e) {
    let {
      index
    } = e.currentTarget.dataset;
    if (this.data.nav_type=== index || index === undefined) {
      return false;
    } else {
      this.setData({
        nav_type: index
      })
    }

  },