微信小程序实现登录注册界面
本文实例为大家分享了微信小程序实现登录注册界面的具体代码，供大家参考，具体内容如下
微信小程序登录注册界面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;
}
