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

news2026/3/27 22:34:20

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 classlogin-container view classheader text classlogoDataDevices/text text classslogan智能设备管理平台/text /view view classform-container view classtab-container text classtab-item {{activeTab login ? active : }} bindtapswitchTab>/* 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; }欢迎欣赏。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2455897.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！