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

 登录
 注册

 

 

  
  登录
 
 


 

  
  注册
 

css;">.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 () {
  
 }
})