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

本篇文章为大家展示了微信小程序实现登录注册tab切换效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都创新互联是一家专业提供右江企业网站建设,专注与成都网站制作、成都网站设计、H5建站、小程序制作等业务。10年已为右江众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

wxml:

 登录
 注册

 

 

  
  登录
 
 


 

  
  注册
 

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
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 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 () {
  
 }
})

上述内容就是微信小程序实现登录注册tab切换效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。