微信小程序  modal弹框组件详解


Posted in Javascript onOctober 27, 2016

微信小程序  modal:

         这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点。       

modal

modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性。

官方文档

微信小程序  modal弹框组件详解

.wxml

<modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}">
  这是对话框的内容。
</modal>

.js

Page({
  data:{
    hidden:false,
    nocancel:false
  },
  cancel: function(){
    this.setData({
       hidden: true
    });
  },
  confirm: function(){
    this.setData({
       nocancel: !this.data.nocancel
    });  
    console.log("clicked confirm");
  }
})

运行效果

微信小程序  modal弹框组件详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
详解javascript replace高级用法
Feb 17 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
从0开始学Vue
Oct 27 #Javascript
微信小程序  Mustache语法详细介绍
Oct 27 #Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 #Javascript
JavaScript登录验证码的实现
Oct 27 #Javascript
微信小程序  自定义创建详细介绍
Oct 27 #Javascript
vue中渐进过渡效果实现
Oct 27 #Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 #Javascript
You might like
再说下636单管机
2021/03/02 无线电
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
Python函数嵌套实例
2014/09/23 Python
python学习 流程控制语句详解
2016/06/01 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
python3中eval函数用法使用简介
2019/08/02 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
500行python代码实现飞机大战
2020/04/24 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
初中科学教学反思
2014/01/21 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
村官2015年度工作总结
2015/10/14 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers