快捷導(dǎo)航

微信小程序?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)聽(tīng)頁(yè)面加載
 */
 login:function(){
  this.setData({
  login:true
  });
 },
 register:function(){
 this.setData({
  login: false
 });
 },
 onLoad: function (options) {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
 */
 onShow: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
 */
 onUnload: function () {
 
 },
 
 /**
 * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 頁(yè)面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function () {
 
 },
 
 /**
 * 用戶(hù)點(diǎn)擊右上角分享
 */
 onShareAppMessage: function () {
 
 }
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

輸入框點(diǎn)擊時(shí)邊框變色效果的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇輸入框點(diǎn)擊時(shí)邊框變色效果的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦
2016-12-12
根據(jù)對(duì)象的某一屬性進(jìn)行排序的js代碼（如：name,age）
實(shí)例為按降序排列，若想改為升序只需把比較器中的value2-value1改為value1-value2就可以了
2010-08-08
用move.js庫(kù)實(shí)現(xiàn)百葉窗特效
本文主要介紹了用move.js庫(kù)實(shí)現(xiàn)百葉窗特效的思路與方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
淺析JavaScript函數(shù)的調(diào)用模式
這篇文章主要為大家詳細(xì)介紹了JavaScript函數(shù)的調(diào)用模式，包括方法調(diào)用模式，構(gòu)造器調(diào)用模式，apply/call調(diào)用模式，感興趣的小伙伴們可以參考一下
2016-08-08
js分頁(yè)工具實(shí)例
這篇文章主要介紹了js分頁(yè)工具及其具體用法,包括js與css的詳細(xì)實(shí)現(xiàn)代碼與使用方法,需要的朋友可以參考下
2015-01-01
JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能
本文主要介紹了JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能的方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-04-04
JavaScript報(bào)錯(cuò)：Uncaught TypeError: Cannot set&n
在 JavaScript 編程中,“Uncaught TypeError: Cannot set property ‘X’ of undefined” 是一種常見(jiàn)的錯(cuò)誤,這種錯(cuò)誤通常發(fā)生在試圖給一個(gè)未定義的對(duì)象的屬性賦值時(shí),本文介紹了JavaScript報(bào)錯(cuò)的解決方案,需要的朋友可以參考下
2024-07-07
JS 判斷某變量是否為某數(shù)組中的一個(gè)值的3種方法(總結(jié))
下面小編就為大家?guī)?lái)一篇JS 判斷某變量是否為某數(shù)組中的一個(gè)值的3種方法(總結(jié))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
一份老外寫(xiě)的XMLHttpRequest代碼多瀏覽器支持兼容性
一份老外寫(xiě)的XMLHttpRequest代碼多瀏覽器支持兼容性...
2007-01-01
js常用代碼段收集
以下是平時(shí)收集的幾個(gè)常用代碼段，大多數(shù)是從網(wǎng)上搜集而來(lái)。也均為未找到是誰(shuí)誰(shuí)原創(chuàng)，是否允許轉(zhuǎn)載等要求，所以如果看到的朋友發(fā)現(xiàn)其中有些代碼是自己寫(xiě)的，還請(qǐng)?jiān)徳谙罗D(zhuǎn)帖出來(lái)。
2011-10-10