foreword
Every project will have a user-side registration and login page. For Xiaobai who is just getting started, he is not very good at UI design. Even if the rough UI interface is designed, it is easy to get stuck when it is implemented in the code. live. This blog mainly introduces a simple and generous page similar to LeetCode login. Without further ado, let's get started!
Implementation
Let's take a look at LeetCode's login page first. It is roughly like the long picture 1 , and the style we made is like the picture 2 .
Figure 1
Figure II
The main difficulty is to add a mask layer on the original page and the click cannot penetrate , write a white box shape on the mask layer, and then add some content (such as loge, design elements, etc.) inside. This kind of floating login page is more simple and elegant than ordinary pages, and it is very convenient and quick to design and implement.
Since there is a well-encapsulated component such as the mask layer in the external component library, we can also use it directly. Here I use the components in vant-weapp . Here I will not introduce the APIs supported by the Overlay component in detail. There are very detailed introductions in the document.
We divide the page into two parts to implement, one is the original content layer, and the other is the mask layer. The original content is responsible for displaying the initial state, and the mask layer is responsible for popping up the mask layer and the floating login window when the user clicks to log in.
In addition, js code is used to realize that the mask layer is not displayed when the user clicks the cancel button in the upper right corner of the mask layer, so that a prototype is completed. I put the code below~
Main idea of the code:
Divide wxml into blocks: original content block, mask layer login block
Click the X in the upper right corner of the mask layer through the onClickHide function to close the mask layer and display the original layer
In order to realize that all models of mobile phones are common, use rpx instead of px to complete most of the CSS part.
<!-- wxml -->
<!-- 原始内容层 -->
<view class="box">
......
</view>
<!-- 遮罩层 -->
<van-overlay show="{
{ show }}" z-index="2">
<view class="wrapper">
<view class="login">
<image src="../../icon/tuantuan.png" class="tuantuan"></image>
<van-icon name="cross" size="40px" custom-style="position:relative ; left:280rpx ; bottom:40rpx" bindtap="onClickHide"/>
<van-divider
contentPosition="left"
customStyle="color: grey; border-color: grey; font-size: 18px; width: 90% ; margin-left:20px ; margin-right:20px ; margin-top:20%"
>
Account
</van-divider>
<input bindinput="getAccount" class="inputborder1" placeholder="输入账号"></input>
<van-divider
contentPosition="left"
customStyle="color: grey; border-color: grey; font-size: 18px; width: 90% ; margin-left:20px ; margin-right:20px ; margin-top:0%"
>
Password
</van-divider>
<input class="inputborder2" type="password" placeholder="输入密码" value='{
{password}}' bindinput='getPassWord'></input>
<view bindtap="goRegister" class="goRegister">注册账号</view>
<view bindtap="goRetrieve" class="goRetrieve">忘记密码</view>
<button bindtap="enterApproval" style="width: 88%;" class="loginButton">登录</button>
<image src="../../icon/client-side.png" class="client-side"></image>
</view>
</view>
</van-overlay> //js
const db = wx.cloud.database()
Page({
data: {
show:false,
password :'',
account :''
},
goIndex(e){
console.log('点击了用户登录')
//显示用户端的遮罩层
this.setData({
show:true
})
},
// 隐藏遮罩层
onClickHide() {
this.setData({
show: false
});
},
//点击登录
enterApproval(){
let account = this.data.account
let password = this.data.password
db.collection("studentUser")
.where({
account:account
})
.get({})
.then(res=>{
console.log("账号是",this.data.account)
console.log("密码是",this.data.password)
console.log("查询数据库成功",res.data)
if(password == res.data[0].password){
console.log('登录成功')
wx.showToast({
title: '登录成功',
})
wx.switchTab({
url: '../index/index',
})
}
else{
console.log("登录失败")
wx.showToast({
title: '登录失败，账号或密码不正确',
icon : "none"
})
}
})
.catch(res=>{
wx.showToast({
title: '登录失败，账号或密码不正确',
icon : "none"
})
})
},
//获取输入的账号
getAccount(e){
this.setData({
account : e.detail.value
})
},
//获取输入的密码
getPassWord: function(e) {
var password = e.detail.value;
this.setData({
password: password
})
},
//进入注册界面
goRegister(){
wx.navigateTo({
url: '../register3/register3',
})
},
//进入找回账号密码页面
goRetrieve(){
wx.navigateTo({
url: '../retrieve/retrieve',
})
}
})text{
padding-right: 10px;
}
.loginHead{
width: 100%;
height: 160rpx;
}
.cross{
float: right;
width: 160rpx;
height: 120rpx;
padding-top: 40rpx;
padding-right: 40rpx;
}
/* 团团图片样式 */
.tuantuan{
width: 160rpx;
height: 120rpx;
padding-top: 40rpx;
padding-left: 40rpx;
}
.loginBody{
width: 100%;
height: 700rpx;
}
.loginFeet{
width: 100%;
height: 300rpx;
}
.Teacherbutton_location{
margin-top: 10px;
border-radius: 80rpx;
color:black;
background-color: #FFFFFF;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);
}
.button_location{
border-radius: 80rpx;
margin-top: 55%;
color:#FFFFFF;
background-color: #D43030;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
}
/* 遮罩层内嵌盒子包装层 */
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
/* 遮罩层内嵌盒子内容层 */
.login{
background-color: #FFFFFF;
width: 600rpx;
height: 1200rpx;
border-radius: 40rpx;
}
/* 输入账号的input */
.inputborder1{
margin-left: 40rpx;
margin-right:40rpx;
margin-bottom: 30rpx;
padding-top: 30rpx;
padding-bottom: 30rpx;
padding-left: 30rpx;
padding-right:30rpx;
border-radius: 20rpx;
border: 2rpx solid #F2E6E6;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);
}
/* 输入密码的input */
.inputborder2{
margin-left: 40rpx;
margin-right:40rpx;
margin-bottom: 30rpx;
padding-top: 30rpx;
padding-bottom: 30rpx;
padding-left: 30rpx;
padding-right:30rpx;
border-radius: 20rpx;
border: 2rpx solid #F2E6E6;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);
}
/* button在wxss里面修改不了宽度和高度，故在wmxl里面添加style属性来实现 */
.loginButton{
position: relative;
padding-top: 100rpx;
}
.goRegister{
position: relative;
top: 5rpx;
float: right;
right: 40rpx;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.goRetrieve{
position: relative;
top: 5rpx;
left: 40rpx;
float: left;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.client-side{
width: 120rpx;
height: 80rpx;
float: right;
margin-top:10rpx ;
margin-right:20rpx;
}epilogue
If you have any questions, please leave a message to discuss. If you think this article is helpful to you, can you give me a free like? The communication between us is my biggest motivation!