微信小程序?qū)崿F(xiàn)登錄注冊(cè)tab切換效果
更新時(shí)間:2020年12月29日 14:31:45 作者:進(jìn)階的碼農(nóng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄注冊(cè)切換效果,簡(jiǎn)易版tab切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
利用三元運(yùn)算符實(shí)現(xiàn)登錄注冊(cè)效果切換,供大家參考,具體內(nèi)容如下
直接上代碼
wxml:
<view class='top'> <text class="{{login?'active':''}}" catchtap='login'>登錄</text> <text class="{{login?'':'active'}}" catchtap='register'>注冊(cè)</text> </view> <view class='log' wx:if="{{login}}"> <form> <input placeholder='賬號(hào)'/> <button>登錄</button> </form> </view> <view class='reg'wx:else> <form> <input placeholder='密碼'/> <button>注冊(cè)</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)聽頁(yè)面加載 */ login:function(){ this.setData({ login:true }); }, register:function(){ this.setData({ login: false }); }, onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載 */ onUnload: function () { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序登錄與注冊(cè)功能的實(shí)現(xiàn)詳解
- 微信小程序?qū)崿F(xiàn)登錄注冊(cè)功能
- 詳解微信小程序入門從這里出發(fā)(登錄注冊(cè)、開發(fā)工具、文件及結(jié)構(gòu)介紹)
- 微信小程序?qū)崿F(xiàn)注冊(cè)登錄功能(表單校驗(yàn)、錯(cuò)誤提示)
- 微信小程序+云開發(fā)實(shí)現(xiàn)歡迎登錄注冊(cè)
- 微信小程序登錄態(tài)和檢驗(yàn)注冊(cè)過沒的app.js寫法
- 微信小程序?qū)崿F(xiàn)登錄界面示例
- 微信小程序?qū)崿F(xiàn)登錄界面
- 微信小程序?qū)崿F(xiàn)登錄注冊(cè)界面
相關(guān)文章
Js md5加密網(wǎng)頁(yè)版MD5轉(zhuǎn)換代碼
Js實(shí)現(xiàn)網(wǎng)頁(yè)上的MD5加密功能,將文字轉(zhuǎn)換為MD5字符,本代碼調(diào)用簡(jiǎn)單,你可以新建一個(gè)網(wǎng)頁(yè),將此網(wǎng)頁(yè)上傳到你的服務(wù)器上,用戶瀏覽網(wǎng)頁(yè),就可實(shí)現(xiàn)MD5加密轉(zhuǎn)換功能,用戶可方便查詢?nèi)我蛔址腗D5碼,很不錯(cuò)的功能2013-03-03如何在uniapp項(xiàng)目中嵌套H5 頁(yè)面
在UniApp中可以通過使用 web-view 組件來嵌入H5頁(yè)面,大概思路是在該頁(yè)面的template部分添加web-view組件,設(shè)置src屬性為所需嵌入的H5頁(yè)面地址,感興趣的朋友跟隨小編一起看看吧2024-02-02關(guān)于RxJS Subject的學(xué)習(xí)筆記
這篇文章主要介紹了關(guān)于RxJS Subject的學(xué)習(xí)筆記,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12微信小程序緩存過期時(shí)間的相關(guān)設(shè)置(推薦)
這篇文章主要介紹了微信小程序緩存過期時(shí)間的相關(guān)知識(shí),主要包括微信小程序緩存機(jī)制介紹及哪些是一定需要過期的緩存,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07基于insertBefore制作簡(jiǎn)單的循環(huán)插空效果
這是一個(gè)基于insertBefore制作簡(jiǎn)單的循環(huán)插空效果,實(shí)現(xiàn)的數(shù)字下面循環(huán)插空效果,給需要的朋友分享。2015-09-09