微信小程序实现登录注册tab切换效果

<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>

.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;
}

Page({
 data: {
  login:true
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 login:function(){
   this.setData({
    login:true
   });
 },
 register:function(){
  this.setData({
   login: false
  });
 },
 onLoad: function (options) {
  
 },
 
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
  
 },
 
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
  
 },
 
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
  
 },
 
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
  
 },
 
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
  
 },
 
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
  
 },
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
  
 }
})