利用三元運算符實現登錄註冊效果切換
直接上代碼
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 () {
}
})
想要獲得更多資料的 請微信搜索公衆號 【熱血科技】，關注一下即可。
