微信小程序?qū)崿F(xiàn)登錄注冊(cè)tab切換效果

本篇文章為大家展示了微信小程序?qū)崿F(xiàn)登錄注冊(cè)tab切換效果，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

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 () {
  
 }
})

上述內(nèi)容就是微信小程序?qū)崿F(xiàn)登錄注冊(cè)tab切換效果，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。