一个好看的小程序登录页面
文章目录
- 前言
- 一、效果图
- 二、实现代码
前言
写一个挺好看的小程序页面，发出来记录一下
一、效果图
登录页面：
注册页面：
通过点击注册和登录按钮切换两个页面淡入淡出效果
二、实现代码
wxml:
<view class="card">
<view class="doublecard {{loginanimation}}" wx:if="{{logincard}}">
<view class="titleView">
<view class="text-shadow-drop-right">Loginview>
view>
<view class="inputViews">
<view class="inputView">
<label class="labeltext">账号label>
<input placeholder="username" bindinput="getUsername" model:value="{{username}}" type="text"/>
view>
<view class="inputView">
<label class="labeltext">密码label>
<input placeholder="password" bindinput="getPassword" model:value="{{password}}" type="password"/>
view>
view>
<view class="btns">
<view class="functionbtn" bindtap="login">
<view>登录view>
view>
<view class="switchView">
<text class="switchcard" bindtap="switchCard">注册<text style="text-decoration: underline;">registertext>text>
view>
view>
view>
<view class="doublecard {{registeranimation}}" wx:if="{{registercard}}">
<view class="titleView">
<view class="text-shadow-drop-right">Registerview>
view>
<view class="inputViews">
<view class="inputView">
<label class="labeltext">新账号label>
<input placeholder="username" bindinput="getNewName" model:value="{{newname}}" />
view>
<view class="inputView">
<label class="labeltext">密码label>
<input placeholder="password" bindinput="getNewPassword" model:value="{{newpassword}}" />
view>
view>
<view class="btns">
<view class="functionbtn" bindtap="register">
<view>注册view>
view>
<view class="switchView">
<text class="switchcard" bindtap="switchCard">登录<text style="text-decoration: underline;">logintext>text>
view>
view>
view>
view>
wxss:
/* pages/login/login.wxss */
page {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.card {
overflow: hidden;
width: 80%;
height: 70%;
border-radius: 30px;
background: #e0e0e0;
box-shadow: 15px 15px 30px #bebebe,
-15px -15px 30px #ffffff;
}
.doublecard {
width: 100%;
height: 100%;
}
.titleView {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: rgb(83, 83, 83);
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
margin: 0 auto;
width: 100%;
height: 30%;
}
.text-shadow-drop-right {
-webkit-animation: text-shadow-drop-right 0.6s both;
animation: text-shadow-drop-right 0.6s both;
}
@-webkit-keyframes text-shadow-drop-right {
0% {
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
100% {
text-shadow: 6px 0 18px rgba(0, 0, 0, 0.35);
}
}
@keyframes text-shadow-drop-right {
0% {
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
100% {
text-shadow: 6px 0 18px rgba(0, 0, 0, 0.35);
}
}
.inputViews {
overflow: hidden;
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40%;
background-color: #7FFF00;
}
.inputView {
position: relative;
top: 0px;
left: 0px;
border: #808080 2px solid;
border-radius: 15rpx;
width: 90%;
height: 35%;
}
.labeltext {
color: rgb(83, 83, 83);
position: absolute;
top: -25%;
left: 8%;
padding-left: 3%;
padding-right: 3%;
height: 50px;
background-color: #7FFF00;
}
input {
border-bottom: rgb(83, 83, 83) 1rpx solid;
position: absolute;
top: 14%;
left: 3%;
height: 75%;
width: 94%;
}
.btns {
height: 30%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.functionbtn {
color: #7FFF00;
font-size: 45rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 25rpx;
width: 75%;
height: 40%;
background-color: rgb(83, 83, 83);
}
.switchView {
position: relative;
top: 0px;
left: 0px;
display: flex;
justify-content: center;
align-items: center;
width: 75%;
height: 30%;
}
.switchcard {
font-family: sans-serif;
color: rgb(59, 59, 230);
position: absolute;
top: -2%;
}
.fade-out-bck {
-webkit-animation: fade-out-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: fade-out-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
z-index: -10;
}
@-webkit-keyframes fade-out-bck {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
50% {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
opacity: 0;
}
}
@keyframes fade-out-bck {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
50% {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
opacity: 0;
}
}
.fade-in-bck {
-webkit-animation: fade-in-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: fade-in-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes fade-in-bck {
0% {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
opacity: 0;
}
50% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
@keyframes fade-in-bck {
0% {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
opacity: 0;
}
50% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
js:
// pages/login/login.js
var app = getApp()
var Url = app.globalData.Url
var login = app.globalData.login
var register = app.globalData.register
Page({
/**
* 页面的初始数据
*/
data: {
username: "",
password: "",
logincard: true,
registercard: false,
loginanimation: "",
registeranimation: "",
newname: "",
newpassword: ""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
getUsername(e) {
this.setData({
username: (e.detail.value).trim()
})
},
getPassword(e) {
this.setData({
password: (e.detail.value).trim()
})
},
getNewName(e) {
this.setData({
newname: (e.detail.value).trim()
})
},
getNewPassword(e) {
this.setData({
newpassword: (e.detail.value).trim()
})
},
login() {
var that = this
if (this.data.username == "") {
wx.showToast({
title: '账号不能为空',
icon: 'none'
})
} else if (this.data.password == "") {
wx.showToast({
title: '密码不能为空',
icon: 'none'
})
} else {
wx.request({
url: Url + login,
data: {
username: this.data.username,
password: this.data.password
},
success: (res) => {
if (res.data == null) {
wx.showToast({
title: '账号或密码错误',
icon: 'none'
})
} else {
app.globalData.username = this.data.username
wx.showToast({
title: '登录成功',
icon: 'none',
success: function () {
setTimeout(() => {
that.setData({
username:"",
password:""
})
wx.reLaunch({
url: '../index/index',
})
}, 1000);
}
})
}
}
})
}
},
switchCard() {
if (this.data.logincard) {
this.setData({
loginanimation: 'fade-out-bck',
})
setTimeout(() => {
this.setData({
logincard: false,
registercard: true,
registeranimation: 'fade-in-bck',
newname:"",
newpassword:""
})
}, 500);
} else {
this.setData({
registeranimation: 'fade-out-bck'
})
setTimeout(() => {
this.setData({
registercard: false,
logincard: true,
loginanimation: 'fade-in-bck',
username:"",
password:""
})
}, 500);
}
},
register() {
if (this.data.newname == "") {
wx.showToast({
title: '新账号不能为空',
icon: 'none'
})
} else if (this.data.newpassword == "") {
wx.showToast({
title: '密码不能为空',
icon: 'none'
})
} else {
wx.request({
url: Url + register,
data: {
newname:this.data.newname,
newpassword:this.data.newpassword
},
success:(res)=>{
if(res.data){
wx.showToast({
title: '注册成功，快去登陆吧:)',
icon: 'none'
})
}else{
wx.showToast({
title: '此账号已存在',
icon: 'none'
})
}
}
})
}
}
})