微信小程序登录注册界面demo,存在不足之处,请指教!
界面图片：
1.js代码：
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() {}
})
2.wxml代码：
<view class="top-box"><view>Hi</view><view class="next-text">欢迎使用！</view>
</view>
<!-- 登录、注册 -->
<view class="center-box"><view class="nav"><view class="left {{current==1?'select':''}}" bindtap="click" data-code="1"><text>登录</text></view><view class="right {{current==0?'select':''}}" bindtap="click" data-code="0"><text>注册</text></view></view><!-- 登录 --><view class="input-box" hidden="{{current==0}}"><view class="wei-input"><icon type="waiting" color="#44ADFB" size="16"></icon><input class="input" auto-focus placeholder="请输入手机号/登录名"/></view><view class="wei-input"><icon type="success" color="#44ADFB" size="16"></icon><input class="input" auto-focus placeholder="请输入登录密码"/></view><view class="forget"><text>忘记密码?</text></view></view><!-- 注册 --><view class="input-box" hidden="{{current==1}}"><view class="wei-input"><icon type="waiting" color="#44ADFB" size="16"></icon><input class="input" auto-focus placeholder="请输入手机号"/></view><view class="wei-input"><icon type="waiting" color="#44ADFB" size="16"></icon><input class="input" auto-focus placeholder="请输入6位验证码"/><text class="input-code" bindtap="getCode">{{codeText}}</text></view><view class="wei-input"><icon type="success" color="#44ADFB" size="16"></icon><input class="input" auto-focus placeholder="请输入密码"/></view><view class="wei-input"><icon type="success" color="#44ADFB" size="16"></icon><input class="input" auto-focus placeholder="请确认密码"/></view></view><view class="sumbit-btn"><button class="button" style="background-color: #33ccff;font-size: 30rpx;" type="primary">立即{{current==1?'登录':'注册'}}</button></view>
</view>
<!-- 重影 -->
<view class="shadow shadow-1"></view><view class="shadow shadow-2"></view>
<!-- 说明 -->
<view class="bottom-box">demo·开源·点赞·收藏·打赏·Jeffery~
</view>3.wxss代码：
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;
}
编写不易，谢谢点赞、收藏、打赏！！！
