微信小程序 -- tab切换（无滑动效果）

最新推荐文章于 2022-09-23 22:18:46 发布

大可不必_妄

最新推荐文章于 2022-09-23 22:18:46 发布

阅读量298

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/J_012345/article/details/117333617

版权

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

10 篇文章 2 订阅

订阅专栏

wxml:

<view>
  <view class="tab">
    <view class="{{ currentIndex == index ? 'tabStyle' : '' }}" wx:for="{{ tabs }}" wx:key="item" bindtap="switchTab" data-index="{{ index }}">{{item}}</view>
  </view>
  <view wx:if="{{ currentIndex == 0 }}">
    周一打卡
  </view>
  <view wx:if="{{ currentIndex == 1 }}">
    周二打卡
  </view>
  <view wx:if="{{ currentIndex == 2 }}">
    周三打卡
  </view>
  <view wx:if="{{ currentIndex == 3 }}">
    周四打卡
  </view>
  <view wx:if="{{ currentIndex == 4 }}">
    周五打卡
  </view>
</view>

wxss:

.tab {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  height: 100rpx;
  line-height: 100rpx;
}
.tab view{
  text-align: center;
  width: 20%;
}
.tabStyle {
  color: #f00;
  border-bottom: 5rpx solid #f00;
}

js:

Page({
  data: {
    tabs:["周一","周二","周三","周四","周五"],
    currentIndex:0
  },
  //  tab切换逻辑
  switchTab(e){
    const index = e.target.dataset.index;
    this.setData({
      currentIndex: index
    })
  },
})