小程序实现tab栏目切换

最新推荐文章于 2023-05-12 10:36:45 发布

huang_jimei

最新推荐文章于 2023-05-12 10:36:45 发布

阅读量387

点赞数

文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/huang_jimei/article/details/129581557

版权

一、效果图
在这里插入图片描述
二、代码
1、xml页面

<!-- 切换的tab栏 -->
  <view class="tab-container">
    <view
      class="default {{type=='plan'? 'type-active':''}}"
      bindtap="handleType"
      data-type="plan"
      >计划详情</view
    >
    <view
      class="default {{type=='internship'? 'type-active': ''}}"
      bindtap="handleType"
      data-type="internship"
      >实习任务</view
    >
  </view>
  <!-- 计划详情 -->
  <view wx:if="{{type=='plan'}}">
    1
  </view>

  <!-- 实习任务 -->
  <view wx:if="{{type=='internship'}}">
    2
  </view>

2、wxss

/* tab切换 */
.tab-container{
  display: flex;
  padding: 0 40rpx;
  width:670rpx;
  margin-top: 20rpx;
}
.default{
  font-size: 28rpx;
font-weight: 500;
color: #626262;
margin-right: 56rpx;
}
.type-active{
  color: #262626;
}

3、js

  data: {
    type:'plan',//控制tab切换
  },
  // 控制tab栏
  handleType(event) {
    const type = event.currentTarget.dataset.type;
    this.setData({
      type: type,
    });
  },