Using ternary operator to realize the switching of login and registration effect
code directly
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
},
/**
* Life cycle function--listen to page load
*/
login:function(){
this.setData({
login:true
});
},
register:function(){
this.setData({
login: false
});
},
onLoad: function (options) {
},
/**
* Life cycle function--listen to the completion of the initial rendering of the page
*/
onReady: function () {
},
/**
* Life cycle function -- monitor page display
*/
onShow: function () {
},
/**
* Life cycle function--listen to page hide
*/
onHide: function () {
},
/**
* Life cycle function--listen for page unloading
*/
onUnload: function () {
},
/**
* Page-related event handlers--listen to user pull-down actions
*/
onPullDownRefresh: function () {
},
/**
* The handler for the bottom-up event on the page
*/
onReachBottom: function () {
},
/**
* The user clicks on the upper right corner to share
*/
onShareAppMessage: function () {
}
})