微信小程序?qū)崿F(xiàn)登錄注冊tab切換效果
更新時間：2020年12月29日 14:31:45 作者：進階的碼農(nóng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄注冊切換效果，簡易版tab切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
利用三元運算符實現(xiàn)登錄注冊效果切換，供大家參考，具體內(nèi)容如下
直接上代碼
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 () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Js md5加密網(wǎng)頁版MD5轉(zhuǎn)換代碼
Js實現(xiàn)網(wǎng)頁上的MD5加密功能，將文字轉(zhuǎn)換為MD5字符，本代碼調(diào)用簡單，你可以新建一個網(wǎng)頁，將此網(wǎng)頁上傳到你的服務(wù)器上，用戶瀏覽網(wǎng)頁，就可實現(xiàn)MD5加密轉(zhuǎn)換功能，用戶可方便查詢?nèi)我蛔址腗D5碼，很不錯的功能2013-03-03
最近常有人在Q群里發(fā)問諸如"怎樣讓js操作文件"、"怎樣讓js實現(xiàn)多線程"等問題。2010-03-03
在UniApp中可以通過使用 web-view 組件來嵌入H5頁面,大概思路是在該頁面的template部分添加web-view組件,設(shè)置src屬性為所需嵌入的H5頁面地址,感興趣的朋友跟隨小編一起看看吧2024-02-02
關(guān)于RxJS Subject的學(xué)習(xí)筆記
這篇文章主要介紹了關(guān)于RxJS Subject的學(xué)習(xí)筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本文主要介紹了Axios去除重復(fù)請求方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
微信小程序緩存過期時間的相關(guān)設(shè)置(推薦)
這篇文章主要介紹了微信小程序緩存過期時間的相關(guān)知識，主要包括微信小程序緩存機制介紹及哪些是一定需要過期的緩存，本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了JS 實現(xiàn)分頁打印功能的相關(guān)資料,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了如何利用微信小程序制作一個打卡時鐘，分為工作和休息兩種狀態(tài)，用戶可以設(shè)置相應(yīng)的時間，所有的時鐘記錄都會被保存下來，感興趣的可以了解一下2022-04-04
這篇文章主要為大家介紹了JS前端組件注冊與畫布渲染實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
基于insertBefore制作簡單的循環(huán)插空效果
這是一個基于insertBefore制作簡單的循環(huán)插空效果，實現(xiàn)的數(shù)字下面循環(huán)插空效果，給需要的朋友分享。2015-09-09