微信小程序實現(xiàn)登錄注冊tab切換效果
更新時間:2020年12月29日 14:31:45 作者:進階的碼農
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)登錄注冊切換效果,簡易版tab切換效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
利用三元運算符實現(xiàn)登錄注冊效果切換,供大家參考,具體內容如下
直接上代碼
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 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ login:function(){ this.setData({ login:true }); }, register:function(){ this.setData({ login: false }); }, onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { } })
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
基于insertBefore制作簡單的循環(huán)插空效果
這是一個基于insertBefore制作簡單的循環(huán)插空效果,實現(xiàn)的數(shù)字下面循環(huán)插空效果,給需要的朋友分享。2015-09-09