微信小程序实现modal弹出框遮罩层组件(可带文本框)


Posted in Javascript onDecember 20, 2020

modal弹出框遮罩层可实现提示信息、验证码等功能

然而在官方文档已经删除了modal的页面,说要废弃modal

微信小程序实现modal弹出框遮罩层组件(可带文本框)

就个人而言modal组件无法被wx.showModal完全替代。大家都知道小程序的wxml的组件可以通过改变js的值实现重新渲染,而接口是无法实现的

微信小程序实现modal弹出框遮罩层组件(可带文本框)

有同感的也不止博主一个人

微信小程序实现modal弹出框遮罩层组件(可带文本框)

官方18-5-13的建议要实现此类功能也是用modal

属性

微信小程序实现modal弹出框遮罩层组件(可带文本框)

说下遮罩层实现,通过改变modal的hidden属性来控制是否显示,通过监听confirm方法来确认提交,通过bindinput来监听modal内表单组件内容

微信小程序实现modal弹出框遮罩层组件(可带文本框)
微信小程序实现modal弹出框遮罩层组件(可带文本框)

js

Page({
 data: {
  hiddenModal1:true,
  hiddenModal2:true,
  input:null
 },
 showModal1:function(e){
  this.setData({hiddenModal1:false})
 },
 model1confirm:function(e){
  this.setData({ hiddenModal1: true })
  wx.showToast({
   title: '我觉得OK',
  })
 },
 model1cancel:function(e){
  this.setData({ hiddenModal1: true })
  wx.showToast({
   title: '我觉得不行',
  })
 },
 input:function(e){
  this.setData({input:e.detail.value})
 },
 showModal2: function (e) {
  this.setData({ hiddenModal2: false })
 },
 model2confirm: function (e) {
  this.setData({ hiddenModal2: true })
  wx.showToast({
   title: '确定' +this.data.input,
   icon:'none'
  })
 },
 model2cancel: function (e) {
  this.setData({ hiddenModal2: true })
  wx.showToast({
   title: '取消'+this.data.input,
   icon: 'none'
  })
 }
})

wxml

<button type="primary" bindtap='showModal1'>弹出提示modal</button>
<button type="default" bindtap='showModal2'>弹出带文本框的modal</button>
<modal hidden="{{hiddenModal1}}" title="提示modal" confirm-text="是" cancel-text="否" bindconfirm="model1confirm" bindcancel="model1cancel">
 modal是真的好用
</modal>
<modal hidden="{{hiddenModal2}}" title="文本框的modal" confirm-text="提交" cancel-text="取消" bindconfirm="model2confirm" bindcancel="model2cancel">
 <input placeholder='请输入内容' bindinput='input'/>
</modal>

到此这篇关于微信小程序实现modal弹出框遮罩层组件(可带文本框)的文章就介绍到这了,更多相关微信小程序modal弹出框遮罩层组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
Javascript 强制类型转换函数
May 17 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
浅析Ajax语法
Dec 05 Javascript
移动端界面的适配
Jan 11 Javascript
WebPack基础知识详解
Jan 16 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 #Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 #Javascript
JavaScript中arguments的使用方法详解
Dec 20 #Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 #Vue.js
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
laravel model 两表联查示例
2019/10/24 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
使用正则替换变量
2007/05/05 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
vue实现分页栏效果
2019/06/28 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
python 异常处理总结
2016/10/18 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
村干部培训班主持词
2014/03/28 职场文书
我的中国梦主题班会
2015/08/14 职场文书
七年级作文之游记
2019/12/11 职场文书