微信小程序实现登录注册界面_javascript技巧_

Page({   /**    * 页面的初始数据    */   data: {     current:1,     codeText:'获取验证码',     counting:false,   },   // 登陆注册监听   click(e){     let index = e.currentTarget.dataset.code;     this.setData({       current:index     })   },   //获取验证码    getCode(){     var that = this;     if (!that.data.counting) {       wx.showToast({         title: '验证码已发送',       })       //开始倒计时60秒       that.countDown(that, 60);     }    },   //倒计时60秒   countDown(that,count){     if (count == 0) {       that.setData({         codeText: '获取验证码',         counting:false       })       return;     }     that.setData({       counting:true,       codeText: count + '秒后重新获取',     })     setTimeout(function(){       count--;       that.countDown(that, count);     }, 1000);   },   /**    * 生命周期函数--监听页面加载    */   onLoad(options) {   },   /**    * 生命周期函数--监听页面初次渲染完成    */   onReady() {   },   /**    * 生命周期函数--监听页面显示    */   onShow() {   },   /**    * 生命周期函数--监听页面隐藏    */   onHide() {   },   /**    * 生命周期函数--监听页面卸载    */   onUnload() {   },   /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh() {   },   /**    * 页面上拉触底事件的处理函数    */   onReachBottom() {   },   /**    * 用户点击右上角分享    */   onShareAppMessage() {   } })

   Hi   欢迎使用！               登录                 注册                          立即{{current==1?'登录':'注册'}}      demo·开源·点赞·收藏·打赏·Jeffery~ 

page{   height: 100%;   background-color: white;   margin: 0px;   padding: 0px; } /* 顶部背景 */ .top-box{   height: 30%;   background-image: linear-gradient( #44ADFB,#5ed6fd);   padding: 30rpx;   color: white;   font-weight: bold; } .next-text{   margin-top: 15rpx; } /* 内容 */ .center-box{   background-color: white;   margin: -20% 20rpx 0rpx 20rpx;   padding: 25rpx;   border-radius: 15rpx;   -webkit-filter: drop-shadow(0 0 8rpx #44ADFB);   filter: drop-shadow(0 0 8rpx #44ADFB); } /* 导航 */ .nav{   display: flex;   text-align: center;   font-size: 32rpx;   margin-bottom: 8%; } .left{   flex: 1;   font-weight: bold; } .right{   flex: 1;   font-weight: bold; } .select{   font-weight: bold;   color: #33ccff; } .select text{   padding-bottom: 5rpx;   border-bottom-left-radius: 10rpx;   border-bottom-right-radius: 10rpx;   border-bottom: 5rpx solid #33ccff; } .wei-input{   display: flex;   flex-direction: row;   align-items: center;   margin-top: 40rpx;   padding-bottom: 20rpx;   border-bottom: 1rpx solid #f1f1f1; } .input-box{   margin: 20rpx; } .input{   padding-left: 20rpx;   font-size: 30rpx; } .input-code{   position: absolute;   right: 40rpx;   font-size: 26rpx;   padding: 10rpx 15rpx;   color: white;   background-color: #FF8C69;   border-radius: 10rpx; } .forget{   font-size: 26rpx;   color: #33ccff;   margin-top: 20rpx;   text-align: right; } .sumbit-btn{   margin: 6% 30rpx 30rpx 30rpx; } /* 重影 */ .shadow{   box-shadow: 0rpx 0rpx 10rpx 0rpx #44ADFB;   border-radius: 25rpx;   background-color: white; } .shadow-1{   height: 40rpx;   margin: -20rpx 50rpx 0 50rpx; } .shadow-2{   position: relative;   z-index: -888;   height: 50rpx;   margin: -30rpx 80rpx 0 80rpx; } /* 最底部 */ .bottom-box{   position:fixed;    bottom: 10rpx;   width:100%;   font-size: 24rpx;   color: gray;   display: flex;   justify-content: center; }