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

作者：LEEstarmmmmm | 2022-12-19 08:49

这篇文章主要介绍了微信小程序弹窗输入组件的实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

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: 0 auto;
 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: 1px solid;
 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;
}
.body button{
 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: 0 auto;
 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: 1px solid;
 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
  })
 }
})

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

推荐阅读

程序员
如何改变小吃店的背景颜色？

如何解决《如何改变小吃店的背景颜色？》经验，为你挑选了7个好方法。 ... [详细]
程序员
Visual Studio git同步抛出错误

如何解决《VisualStudiogit同步抛出错误》经验，为你挑选了1个好方法。 ... [详细]
程序员
为什么strings.HasPrefix比bytes.HasPrefix快？

如何解决《为什么strings.HasPrefix比bytes.HasPrefix快？》经验，为你挑选了1个好方法。 ... [详细]
程序员
ACTION_OPEN_DOCUMENT在MIUI上不起作用

如何解决《ACTION_OPEN_DOCUMENT在MIUI上不起作用》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何将文本参数传递给`IN`运算符的存储函数

如何解决《如何将文本参数传递给`IN`运算符的存储函数》经验，为你挑选了1个好方法。 ... [详细]
程序员
带有Open vSwitch的LXC

如何解决《带有OpenvSwitch的LXC》经验，为你挑选了0个好方法。 ... [详细]
程序员
在Java中解析异常

如何解决《在Java中解析异常》经验，为你挑选了1个好方法。 ... [详细]
程序员
返回true然后从for循环中断

如何解决《返回true然后从for循环中断》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在getJSON()函数中检查文件？

如何解决《如何在getJSON()函数中检查文件？》经验，为你挑选了1个好方法。 ... [详细]
程序员
将嵌套数组转换为对象

如何解决《将嵌套数组转换为对象》经验，为你挑选了0个好方法。 ... [详细]
程序员
两个不同的OWIN应用程序可以授权OAuth2承载访问令牌吗？

如何解决《两个不同的OWIN应用程序可以授权OAuth2承载访问令牌吗？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Github错误：无法连接到443端口

如何解决《Github错误：无法连接到443端口》经验，为你挑选了1个好方法。 ... [详细]
程序员
C++ lambda两个复制构造函数调用

如何解决《C++lambda两个复制构造函数调用》经验，为你挑选了1个好方法。 ... [详细]
程序员
可捕获的致命错误:传递给"...\FormType :: __ construct()的参数1必须实现接口

如何解决《可捕获的致命错误:传递给"\FormType::__construct()的参数1必须实现接口》经验，为你挑选了0个好方法。 ... [详细]
程序员
线条图用灰色和黑色虚线

如何解决《线条图用灰色和黑色虚线》经验，为你挑选了1个好方法。 ... [详细]
程序员
Json.Net序列化类名而不是内部属性

如何解决《Json.Net序列化类名而不是内部属性》经验，为你挑选了1个好方法。 ... [详细]
程序员
MATLAB对数组值表达式的所有元素求和

如何解决《MATLAB对数组值表达式的所有元素求和》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在Jinja扩展中解析和注入其他节点？

如何解决《如何在Jinja扩展中解析和注入其他节点？》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用Lua C函数时减少重复的任何提示

如何解决《使用LuaC函数时减少重复的任何提示》经验，为你挑选了1个好方法。 ... [详细]
程序员
保持一个类对象永远活着

如何解决《保持一个类对象永远活着》经验，为你挑选了1个好方法。 ... [详细]

LEEstarmmmmm

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

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

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