当前位置: 开发笔记 > Android > 正文

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

作者：許宸瑜_ | 来源：互联网 | 2022-06-20 02:19

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

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

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
  })
 }
})

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

推荐阅读

java
关于javascript:小程序原生开发中一个变量控制页面的主题

一般的网页我的项目能够很容易的实现换肤性能，能够通过js扭转link元素中引入的css主题款式链接。然而微信小程序不能动静扭转wxss文件，所以须要其余的计划来实现。 ... [详细]

蜡笔小新 2024-09-27 18:45:44
xml
小程序canvas绘图并保存到系统相册

开始实现之前先上个效果图tips网络图片需先配置download域名，可通过wx.getImageInfo转为临时路径；个人习惯问题，我习 ... [详细]

蜡笔小新 2024-10-11 20:54:36
xml
PyQt5 QTextEdit：深入解析Python中多功能GUI库的应用与实现

本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定，提供了超过 620 个类和 6000 个函数及方法，广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件，支持丰富的文本编辑功能，如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能，还在于其易用性和灵活性，使其成为开发复杂用户界面的理想选择。 ... [详细]

蜡笔小新 2024-10-28 23:56:36
java
深入解析Tomcat：开发者的实用指南

深入解析Tomcat：开发者的实用指南 ... [详细]

蜡笔小新 2024-10-31 09:46:02
json
优化后的标题：利用 UniApp 封装小程序 API 请求接口的最佳实践

在本文中，我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件，定义基础 URL 并传入后端提供的 URL 作为请求参数。同时，配置请求方法（如 GET、POST）和请求头（例如包含 token 的认证信息），以实现高效、安全的 API 调用。此外，我们还将介绍如何处理请求和响应的错误，以及如何优化请求性能，确保应用在不同平台上的兼容性和稳定性。 ... [详细]

蜡笔小新 2024-10-28 20:22:32
xml
【Python爬虫实操】不创作小说，专精网站内容迁移，超高效！（含源代码）

本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移，涵盖前端、后端及Android相关知识点。通过具体实例和源代码，展示了如何精准抓取并迁移网站内容，适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]

蜡笔小新 2024-10-28 20:00:28
json
如何构建并优化微信小程序页面的设计与功能

本文将深入探讨微信小程序页面的设计与优化方法，旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解，读者能够掌握从页面布局到功能实现的全过程，提升开发技能与应用质量。 ... [详细]

蜡笔小新 2024-10-28 14:33:39
json
个人总结_软件工程课程——个人总结

本文由编程笔记#小编为大家整理，主要介绍了软件工程课程——个人总结相关的知识，希望对你有一定的参考价值。前言时长4个与的软件工程实践结束。Alpha与B ... [详细]

蜡笔小新 2024-10-17 09:18:58
xml
深入解读代码页与字符集的概念及其实际应用

许多开发者可能未曾留意到这一问题，但如果您的网站频繁遭遇不明原因的乱码现象，深入了解代码页与字符集的概念及其实际应用将大有裨益。代码页（Codepage），即内码表，是计算机系统中用于映射字符与其编码值的一种机制，不同的代码页支持不同的字符集，正确选择和配置代码页对于确保文本数据的准确显示至关重要。在多语言环境下，合理运用字符集和代码页能够有效避免字符编码冲突，提升用户体验。 ... [详细]

蜡笔小新 2024-10-29 16:31:09
xml
Android Studio XML 格式化问题解决方案「值得 bookmark」

在使用 Android Studio 进行开发时，经常会遇到 XML 文件中的视图元素无法正确格式化的问题，特别是在手动添加或修改 `` 元素时。本文将详细介绍如何解决这一常见问题，并提供一些实用的技巧，帮助开发者高效地管理和优化 XML 布局文件。建议将本文收藏以备后续参考。 ... [详细]

蜡笔小新 2024-10-29 13:22:30
java
Spring注解开发指南：@Resource与@Component详解

Spring注解开发指南：@Resource与@Component详解 ... [详细]

蜡笔小新 2024-10-29 13:20:25
java
探讨 jBPM 数据库表结构设计的精要与实践

探讨 jBPM 数据库表结构设计的精要与实践 ... [详细]

蜡笔小新 2024-10-29 12:46:10
java
深入解析 Spring MVC 的核心原理与应用实践

本文将详细探讨Spring MVC的核心原理及其实际应用，首先从配置web.xml文件入手，解析其在初始化过程中的关键作用，接着深入分析请求处理流程，包括控制器、视图解析器等组件的工作机制，并结合具体案例，展示如何高效利用Spring MVC进行开发，为读者提供全面的技术指导。 ... [详细]

蜡笔小新 2024-10-29 12:34:06
java
深入理解Spring AOP：增强机制详解与应用

本课程详细解析了Spring AOP的核心概念及其增强机制，涵盖前置增强、后置增强和环绕增强等类型。通过具体示例，深入探讨了如何在实际开发中有效运用这些增强技术，以提升代码的模块化和可维护性。此外，还介绍了Spring AOP在异常处理和性能监控等场景中的应用，帮助开发者更好地理解和掌握这一强大工具。 ... [详细]

蜡笔小新 2024-10-28 23:33:15
java
JVM调优实战之三种垃圾收集器组合性能比较（GC Easy日志分析）

JVM调优实战之三种垃圾收集器组合性能比较（GC Easy日志分析） ... [详细]

蜡笔小新 2024-10-10 20:50:47

許宸瑜_

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章