微信小程序实现登录注册tab切换效果
程序员文章站
2023-11-13 18:22:40
利用三元运算符实现登录注册效果切换，供大家参考，具体内容如下
直接上代码
wxml:
利用三元运算符实现登录注册效果切换，供大家参考，具体内容如下
直接上代码
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 () {
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： JavaScript引用类型之Array类型API详解
下一篇： 原生js实现淘宝放大镜效果