微信小程序弹窗输入组件的实现解析

2023-08-17 18:34:04 336

写项目的时候发现小程序没有自带的弹窗输入的组件，只能自己写一个。

1.半透明的遮盖层

遮盖层的样式和显隐事件

wxml代码：


弹窗

wxss代码：

.model{
position:absolute;
width:100%;
height:100%;
background:#000;
z-index:999;
opacity:0.5;
top:0;
left:0;
}

js代码：

/**
*页面的初始数据
*/
data:{
showModal:false,
},
/**
*控制遮盖层的显示
*/
eject:function(){
this.setData({
showModal:true
})
}

2.弹窗窗口实现

弹窗窗口的样式和显隐事件

wxml代码：



标题


返回






确定

wxss代码：

.modalDlg{
width:70%;
position:fixed;
top:350rpx;
left:0;
right:0;
z-index:9999;
margin:0auto;
background-color:#fff;
border-radius:10rpx;
display:flex;
flex-direction:column;
align-items:center;
}
.windowRow{
display:flex;
flex-direction:row;
justify-content:space-between;
height:110rpx;
width:100%;
}
.back{
text-align:center;
color:#f7a6a2;
font-size:30rpx;
margin:30rpx;
}
.userTitle{
font-size:30rpx;
color:#666;
margin:30rpx;
}
.wishName{
width:100%;
justify-content:center;
flex-direction:row;
display:flex;
margin-bottom:30rpx;
}
.wish_put{
width:80%;
border:1pxsolid;
border-radius:10rpx;
padding-left:10rpx;
}
.wishbnt{
width:100%;
font-size:30rpx;
margin-bottom:30rpx;
}
.wishbnt_bt{
width:50%;
background-color:#f7a6a2;
color:#fbf1e8;
font-size:30rpx;
border:0;
}

js代码：

/**
*页面的初始数据
*/
data:{
showModal:false,
textV:''
},
/**
*控制显示
*/
eject:function(){
this.setData({
showModal:true
})
},
/**
*点击返回按钮隐藏
*/
back:function(){
this.setData({
showModal:false
})
},
/**
*获取input输入值
*/
wish_put:function(e){
this.setData({
textV:e.detail.value
})
},
/**
*点击确定按钮获取input值并且关闭弹窗
*/
ok:function(){
console.log(this.data.textV)
this.setData({
showModal:false
})
}

3.完整代码

最后献上完整代码，有点啰嗦了，想尽量详细点

wxml代码：


弹窗




标题


返回






确定

wxss代码：

.body{
width:100%;
height:100%;
background-color:#fff;
position:fixed;
display:flex;
}
.bodybutton{
height:100rpx;
}
.model{
position:absolute;
width:100%;
height:100%;
background:#000;
z-index:999;
opacity:0.5;
top:0;
left:0;
}
.modalDlg{
width:70%;
position:fixed;
top:350rpx;
left:0;
right:0;
z-index:9999;
margin:0auto;
background-color:#fff;
border-radius:10rpx;
display:flex;
flex-direction:column;
align-items:center;
}
.windowRow{
display:flex;
flex-direction:row;
justify-content:space-between;
height:110rpx;
width:100%;
}
.back{
text-align:center;
color:#f7a6a2;
font-size:30rpx;
margin:30rpx;
}
.userTitle{
font-size:30rpx;
color:#666;
margin:30rpx;
}
.wishName{
width:100%;
justify-content:center;
flex-direction:row;
display:flex;
margin-bottom:30rpx;
}
.wish_put{
width:80%;
border:1pxsolid;
border-radius:10rpx;
padding-left:10rpx;
}
.wishbnt{
width:100%;
font-size:30rpx;
margin-bottom:30rpx;
}
.wishbnt_bt{
width:50%;
background-color:#f7a6a2;
color:#fbf1e8;
font-size:30rpx;
border:0;
}

js代码：

Page({
/**
*页面的初始数据
*/
data:{
showModal:false,
textV:''
},
/**
*控制显示
*/
eject:function(){
this.setData({
showModal:true
})
},
/**
*点击返回按钮隐藏
*/
back:function(){
this.setData({
showModal:false
})
},
/**
*获取input输入值
*/
wish_put:function(e){
this.setData({
textV:e.detail.value
})
},
/**
*点击确定按钮获取input值并且关闭弹窗
*/
ok:function(){
console.log(this.data.textV)
this.setData({
showModal:false
})
}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

微信小程序 弹窗输入组件的实现解析

热门推荐

随机推荐

微信小程序弹窗输入组件的实现解析