微信小程序实现登录注册tab切换效果

作者:进阶的码农 时间:2024-04-29 13:11:29 

利用三元运算符实现登录注册效果切换,供大家参考,具体内容如下

微信小程序实现登录注册tab切换效果

直接上代码

wxml:


<view class='top'>
<text class="{{login?'active':''}}" catchtap='login'>登录</text>
<text class="{{login?'':'active'}}" catchtap='register'>注册</text>
</view>

<view class='log' wx:if="{{login}}">
<form>
<input placeholder='账号'/>
<button>登录</button>
</form>

</view>
<view class='reg'wx:else>
<form>
<input placeholder='密码'/>
<button>注册</button>
</form>
</view>

wxss:


.top{
display: flex;
flex-direction: row;
height: 100rpx;
border-bottom: 1px solid #ccc;
}
.top text{
width: 50%;
line-height: 100rpx;
text-align: center;
}
.top .active{
border-bottom: 2px solid red;
}
input{
border-bottom: 1px solid #ccc;
line-height: 100rpx;
height: 100rpx;
padding-left: 40rpx;
margin-bottom: 40rpx;
}

js:


Page({
data: {
login:true
},

/**
* 生命周期函数--监听页面加载
*/
login:function(){
 this.setData({
 login:true
 });
},
register:function(){
this.setData({
 login: false
});
},
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

来源:https://blog.csdn.net/wangguang1995/article/details/79790828

标签:微信小程序,tab,切换
0
投稿

猜你喜欢

  • 解决MySQL5.7安装后没有data文件夹无法登录的问题

    2024-01-14 21:39:50
  • Python Pygame实战之打砖块小游戏

    2021-04-10 01:41:11
  • 如何使用AspUpload2.0组件?

    2010-06-05 12:33:00
  • Python实现FTP文件定时自动下载的步骤

    2022-04-13 02:07:14
  • pandas中对文本类型数据的处理小结

    2022-06-25 06:39:16
  • Tensorflow 自带可视化Tensorboard使用方法(附项目代码)

    2023-10-13 00:37:40
  • python中metaclass原理与用法详解

    2023-11-26 23:27:56
  • display:inline问题小结

    2008-05-01 13:08:00
  • js实现百度地图定位于地址逆解析,显示自己当前的地理位置

    2024-05-08 10:12:04
  • 如何更优雅地写python代码

    2022-03-03 04:53:24
  • Java常用正则表达式验证类完整实例【邮箱、URL、IP、电话、身份证等】

    2022-09-14 05:59:39
  • 基于Opencv的图像卡通化实现代码

    2023-07-10 06:58:55
  • SQL Server之SELECT INTO 和 INSERT INTO SELECT案例详解

    2024-01-22 01:11:56
  • python argparse传入布尔参数false不生效的解决

    2023-07-03 16:12:20
  • 利用Python实现命令行版的火车票查看器

    2021-10-24 13:59:21
  • Pytorch结合PyG实现MLP过程详解

    2022-05-01 21:51:55
  • Numpy中的mask的使用

    2022-06-10 19:33:11
  • SQLServer:探讨EXEC与sp_executesql的区别详解

    2024-01-29 02:53:53
  • 设定sql server定期自动备份数据库

    2024-01-16 18:14:30
  • Python中的异常处理相关语句基础学习笔记

    2021-10-18 00:54:50
  • asp之家 网络编程 m.aspxhome.com