微信小程序--动态切换登录注册标签页

hashiqimiya2026-03-28 13:27

1、try.js的

1.1、data函数

添加

复制代码

activeTab: 'login', // 当前激活的标签，默认为登录

1.2、添加一个函数

复制代码

// 切换登录/注册标签
  switchTab(e) {
    const tab = e.currentTarget.dataset.tab;
    this.setData({
      activeTab: tab
    });
  },

2、try.wxml的代码

复制代码

<!--pages/try/try.wxml-->
<view class="login-container">
  <view class="header">
    <text class="logo">DataDevices</text>
    <text class="slogan">智能设备管理平台</text>
  </view>

  <view class="form-container">
    <view class="tab-container">
      <text class="tab-item {{activeTab === 'login' ? 'active' : ''}}" bindtap="switchTab" data-tab="login">登录</text>
      <text class="tab-item {{activeTab === 'register' ? 'active' : ''}}" bindtap="switchTab" data-tab="register">注册</text>
    </view>
  </view>
  
  <!-- 登录表单 -->
  <view wx:if="{{activeTab === 'login'}}" class="form">
  <view>登录表单</view>
  </view>

  <!-- 注册表单 -->
  <view wx:if="{{activeTab === 'register'}}" class="form">
  <view>注册表单</view>
  </view>

</view>

3、try.wxss

复制代码

/* pages/try/try.wxss */
.login-container {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  text-align: center;
  margin-top: 100rpx;
  margin-bottom: 60rpx;
}
.logo {
  font-size: 48rpx;
  font-weight: bold;
  color: #1890ff;
  display: block;
  margin-bottom: 10rpx;
}
.slogan {
  font-size: 24rpx;
  color: #666;
}
.form-container {
  background-color: white;
  border-radius: 12rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 40rpx;
}
.tab-container {
  display: flex;
  border-bottom: 1rpx solid #e5e5e5;
  margin-bottom: 40rpx;
}
.tab-item {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  padding: 20rpx 0;
  color: #666;
  position: relative;
}
.tab-item.active {
  color: #1890ff;
  font-weight: bold;
}
/* 给"当前选中的 tab"底部加一条蓝色横线 */
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 4rpx;
  background-color: #1890ff;
}

欢迎欣赏。