微信小程序同一界面两个版块的跳转

在同一界面中实现两个版块的跳转，先上图：

登录界面

注册界面
wxml代码

<view class="top-line-button {{TopIndex == 0 ? 'active':''}} " data-index="0" bindtap='changstyle'>登陆
    </view>    
    <view class="top-line-button {{TopIndex == 1 ? 'active':''}} " data-index="1" bindtap='changstyle'>注册

js代码

  changstyle:function(e){
   let index=e.currentTarget.dataset.index;
   this.setData({
     TopIndex:index
   })
 },

wxml中由data-index进行点击传值，让js知道你的点击，从而改变 TopIndex的值，来展现不同的界面，下面的界面你就可以这么实现。
对于点击时展现文字不同大小和颜色是通过wxss实现的。

.top-line-button {  
  font-size: 24rpx;     
  color: #777;  
  margin: 150rpx; 
  margin-top:40rpx; 
  padding-top:0rpx;
  } 
.active {                        
   transform: scale(1.45);  
   transform: all 2s;  
   border-bottom-style: solid;  
   border-bottom-color: #744646;  
   border-bottom-width: 5rpx;  
   color: white;
   }