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

在同一界面中实现两个版块的跳转,先上图:
微信小程序同一界面两个版块的跳转_第1张图片
登录界面
微信小程序同一界面两个版块的跳转_第2张图片
注册界面
wxml代码

登陆
        
    注册

js代码

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

wxml中由data-index进行点击传值,让js知道你的点击,从而改变 TopIndex的值,来展现不同的界面,下面的界面你就可以这么实现。微信小程序同一界面两个版块的跳转_第3张图片
对于点击时展现文字不同大小和颜色是通过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;
   }

你可能感兴趣的:(微信小程序)