微信小程序实现tab切换_微信小程序tab切换

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>
1
2
3
4
5

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%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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
      })
    }

  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4.更多小程序案例，请关注苏苏的码云，（开源不易，大家共勉）