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


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 相关文章推荐
JQuery 学习笔记 element属性控制
Jul 23 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
VSCode搭建React Native环境
May 07 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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 使用memcached简单示例分享
2015/03/05 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
js中less常用的方法小结
2017/08/09 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
python快排算法详解
2019/03/04 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
十八大闭幕感言
2014/01/22 职场文书
信息技术培训感言
2014/03/06 职场文书
欢送会主持词
2015/07/01 职场文书