微信小程序  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 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
vue 动态创建组件的两种方法
Dec 31 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
php 高效率写法 推荐
2010/02/21 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
php文件上传的两种实现方法
2016/04/04 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
Smarty模板配置实例简析
2019/07/20 PHP
用jscript实现新建word文档
2007/06/15 Javascript
js输出列表实现代码
2010/09/12 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python批量处理txt文件的实例代码
2020/01/13 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
高中考试作弊检讨书
2014/01/14 职场文书
辞职信格式范文
2015/05/13 职场文书
靠谱准确的求职信
2019/04/02 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers