当前位置:   article > 正文

微信小程序实现tab切换_微信小程序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.更多小程序案例,请关注苏苏的码云,(开源不易,大家共勉)

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/96919
推荐阅读
相关标签