小程序登录弹窗代码
时间: 2023-12-03 19:03:46 浏览: 18
小程序登录弹窗代码如下:
1. 在 wxml 文件中添加弹窗的布局代码:
```
<view class="popup-mask" wx:if="{{showPopup}}">
<view class="popup">
<view class="popup-close" bindtap="closePopup">关闭</view>
<view class="popup-title">登录</view>
<form bindsubmit="formSubmit">
<input type="text" name="username" placeholder="请输入用户名" />
<input type="password" name="password" placeholder="请输入密码" />
<button type="submit">登录</button>
</form>
</view>
</view>
```
2. 在 wxss 文件中添加弹窗的样式:
```
.popup-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 10000;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 16px;
color: #666;
cursor: pointer;
}
.popup-title {
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
}
input {
margin-bottom: 10px;
}
button {
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
}
```
3. 在 js 文件中添加弹窗的逻辑代码:
```
Page({
data: {
showPopup: false
},
openPopup() {
this.setData({
showPopup: true
})
},
closePopup() {
this.setData({
showPopup: false
})
},
formSubmit(e) {
const {username, password} = e.detail.value
// 调用登录接口进行登录操作
// 登录成功后关闭弹窗
this.setData({
showPopup: false
})
}
})
```
其中,openPopup 方法用于打开弹窗,closePopup 方法用于关闭弹窗,formSubmit 方法用于处理表单提交事件,包括获取表单数据并调用登录接口进行登录操作。