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


Posted in Javascript onAugust 12, 2019

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

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.完整代码

最后献上完整代码,有点??铝耍?刖×肯晗傅?br />

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
取得传值的函数
Oct 27 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
详解使用create-react-app快速构建React开发环境
May 16 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 #Javascript
ElementUI radio组件选中小改造
Aug 12 #Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 #Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 #Javascript
react实现antd线上主题动态切换功能
Aug 12 #Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 #Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 #Javascript
You might like
php,不用COM,生成excel文件
2006/10/09 PHP
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
常用DOM整理
2015/06/16 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
PyQt5每天必学之事件与信号
2018/04/20 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
幼儿园中班区域活动总结
2014/07/09 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
社区党务工作总结2015
2015/05/19 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL