文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > 微信小程序 > 小程序开发 > 正文

使用小程序写一个弹窗输入组件

hzc
发布： 2020-06-29 10:50:04
转载
2981人浏览过

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

1.半透明的遮盖层

遮盖层的样式和显隐事件
wxml代码：

<view class="body">
  <button bindtap='eject'>弹窗</button>
</view>
<view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>
登录后复制

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代码：

<view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>
  <view class='windowRow'>
    <text class='userTitle'>标题
  </text>
    <view class='back' bindtap='back'>
      返回
    </view>
  </view>
  <view class='wishName'>
    <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input>
  </view>
  <view class='wishbnt'>
    <button class='wishbnt_bt' bindtap='ok'>确定</button>
  </view>
</view>
登录后复制

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代码：

<view class="body">
  <button bindtap='eject'>弹窗</button>
</view>
<view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view>
<view class="modalDlg" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>
  <view class='windowRow'>
    <text class='userTitle'>标题
  </text>
    <view class='back' bindtap='back'>
      返回
    </view>
  </view>
  <view class='wishName'>
    <input bindinput='wish_put' placeholder='请输入内容' class='wish_put'></input>
  </view>
  <view class='wishbnt'>
    <button class='wishbnt_bt' bindtap='ok'>确定</button>
  </view>
</view>
登录后复制

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
    })
  }
})
登录后复制

推荐教程：《微信小程序》 

以上就是使用小程序写一个弹窗输入组件的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
相关标签：
JS 事件 微信小程序
来源：简书网
收藏 点赞
上一篇：Proxy 对象的了解及学习 下一篇：小程序new Date()方法失效怎么办
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何搭建支持共享小程序的平台？ 小程序已成为企业与用户之间沟通的重要桥梁。为了满足用户多样化的需求，搭建一个支持共享小程序的平台显得尤为重要。如何搭建这样一个平台，以便为开发者提供便捷的小程序开发环境，同时也为用户提供丰富的小程序应用体验？首先，我们需要明确搭建支持共享小程序的平台的目标和功能。这样的平台应具备以下几个核心功能：一是为开发者提供易用的开发工具，帮助他们快速创建和发布小程序；二是支持小程序之间的数据共享和互通，提升用户体验；三是提供稳定可靠的服务，确保小程序的正常运行。在搭建平台的过程中，我们需要选择合适的技术架
2025-06-09 08:52:11
914
小程序的优势在哪？小程序对比公众号的优势特点介绍 2018年小程序的发展势头迅猛，数据显示其增长令人震惊。从2017年1月正式上线到现在，仅用不到两年的时间，小程序相关的新闻和奇迹层出不穷，例如一夜之间获得千万用户的圣诞帽小程序。移动互联网时代已经全面进入了微信互联网时代！那么，小程序的优势是什么？与公众号相比，微信小程序有哪些优势？目前，微信的月活跃用户超过10亿，作为与微信深度绑定并拥有众多入口的小程序，已经服务了超过5亿用户。根据微信发布的数据，截至7月11日，已上线的小程序超过100万个，加入的小程序超过150万个；已有5000多个第三
2025-06-09 08:46:44
971
二手交易小程序需要办理哪些资质? 随着循环经济的蓬勃发展，二手交易市场愈加繁荣，二手交易小程序应运而生，为买卖双方提供了一个便捷的交易平台。然而，创办二手交易小程序并非轻而易举，需要通过一系列证件的办理来确保平台的合法合规运营。那么，究竟需要办理哪些证件呢？ICP许可证（互联网信息服务业务经营许可证）这是所有从事经营性活动的网站都必须办理的基础许可证，二手交易小程序作为在线交易平台也不例外。ICP许可证分为经营性和非经营性两种，通常情况下，二手交易小程序需要申请经营性ICP许可证。EDI经营许可证（电子数据交换业务经营许可证）由
2025-06-09 08:46:12
598
怎样开发一个微信小程序？ 如何开发一个小程序？当前，许多人通过微信、QQ等大型社交平台来管理社群。然而，传统社群常常无法满足或高效发挥特殊功能的需求。因此，通过开发小程序可以优化这些不足。微信小程序提供了开放的公共接口，商家或开发者可以利用这些接口开发各种功能，并通过对接小程序实现商城功能。在开发微信小程序之前，需要满足以下条件：1、营业执照（个人雇主/公司）；2、经过认证的微信小程序账号；3、微信支付的商户号。目前开发微信小程序商城系统，有两种常见的方法：1、定制开发：这种方法通常适用于有独特需求的企业，需要组建自己的
2025-06-09 08:44:15
683
小程序云开发和普通开发的区别 在这个数字化的时代，小程序就像是大家口袋里的多功能工具，随时准备解决我们生活中的各种问题。然而，在这些便利背后，有两种不同的力量推动着它们的发展——小程序云开发与小程序普通开发。今天，让我带你了解一下小程序开发的趣事和小知识。首先，抛开技术术语不谈，小程序云开发就像是游戏中的外挂模式，而小程序普通开发则像是传统的单机游戏。为什么这么说呢？小程序云开发提供的是一站式解决方案，将服务器、数据库、文件存储都托管在云端，开发者就像是有了一个无形的“大管家”，无需自己购买和维护服务器，也不用担心数据存储的
2025-06-09 08:42:31
666
商城小程序如何运用社交裂变加速传播 商城小程序已成为商家与用户互联、扩展销售的重要工具。社交裂变作为一种成本低、效率高的推广策略，能够帮助商城小程序迅速聚集用户，实现爆发式增长。那么，商城小程序如何有效利用社交裂变呢？一、制定吸引人的裂变活动成功的裂变活动需要有吸引人的激励机制。商城小程序可以根据自身特点和目标用户群体，设计多样化的裂变活动：新用户优惠包：新用户首次关注小程序即可获得优惠券、积分等奖励，促使用户注册并使用。团购砍价活动：用户邀请朋友一起团购商品，可以享受更低的价格，激励用户分享传播。限时抢购活动：设置限时限量抢购活
2025-06-09 08:36:31
632
小程序后端架构设计原则和技术选型 小程序后端架构设计的原则和技术选型在很大程度上取决于项目的规模、复杂性和需求。以下是一些常见的设计原则和可能的技术选型：后端架构设计原则包括：可伸缩性：设计一个能够应对用户增长需求的后端系统。通过分布式架构和负载均衡等技术，确保系统在不同规模下都能保持良好的性能。模块化：采用模块化的设计方法，将系统分解为独立的模块或服务。这种方法有助于系统的维护、扩展和替换。松耦合：降低模块间的耦合度，使各个组件能够独立开发、测试和维护，从而提高系统的灵活性和可维护性。安全性：重视系统的安全性，包括对用户数据的
2025-06-09 08:32:12
850
利用小程序开发提升用户参与度的策略 亲爱的读者朋友们，今天我们来探讨一个热门话题——如何通过小程序开发来提升用户参与度。我们不仅要将用户视为王者，更要让他们成为舞台上的明星，积极参与进来，而不仅仅是旁观者！首先，要理解小程序开发的魅力所在：它就像一个小巧可爱的迷你玩具，无需下载安装，几秒钟就能让用户玩得不亦乐乎。小程序的轻量化特性在用户体验上具有独特的优势，这也为提升用户参与度提供了肥沃的土壤。策略一：个性化定制。小程序开发需要像量身定做的西装一样，精准契合用户的喜好和需求。当用户发现这个小程序仿佛是为他们量身打造时，他们的参与热
2025-06-09 08:28:01
945
汽车销售搭建多个小程序的线上服务技巧 随着移动互联网的普及和消费者购车习惯的变化，传统的汽车销售模式已无法满足市场需求。构建并运营多个小程序，已成为汽车销售企业转型升级、提升线上服务能力的关键策略。一.精准定位，打造差异化小程序矩阵汽车销售企业需明确各小程序的目标用户群体和服务功能，形成差异化的小程序矩阵。例如，可以开发一款专注于新车展示与预约试驾的小程序，针对潜在购车用户；另一款则专注于二手车交易，吸引换车或预算有限的消费者。同时，推出售后服务小程序，提供保养预约、故障咨询等服务，以增强客户忠诚度。通过精准的定位，每个小程序都能更
2025-06-09 08:24:25
815
小程序在物资供应领域的具体应用场景 亲爱的物资供应链界的朋友们，今天我们来聊聊那个在你们这个领域里正日益流行的小工具——小程序。没错，就是那个无需下载、扫码即用、操作简便的小程序，它就像一个无处不在的小精灵，正悄然改变我们的供应链世界。先让我们通过一个场景来理解其技术应用。想象一下，在一个忙碌的仓库中，工作人员正忙于管理各种物资。突然，一个大客户下了紧急订单，仓库经理急得一拍大腿：“库存信息还没更新，怎么办？”这时，一个聪明的你使用的小程序就发挥了作用。工作人员只需拿出手机，扫描货架上的二维码，所有的物品信息便立即显示在手机上，包
2025-06-09 08:22:15
132
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部