微信小程序实现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 相关文章推荐
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
vue 给数组添加新对象并赋值
Apr 20 Vue.js
微信小程序自定义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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php防止sql注入简单分析
2015/03/18 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
PHP chr()函数讲解
2019/02/11 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
vue页面切换过渡transition效果
2018/10/08 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
python二叉树的实现实例
2013/11/21 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python中的格式化输出用法总结
2016/07/28 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
解决Python3下map函数的显示问题
2019/12/04 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
python导入库的具体方法
2020/06/18 Python
关于读书的演讲稿500字
2014/08/27 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
宣传稿格式范文
2015/07/23 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书