微信小程序  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 相关文章推荐
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
从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
深入PHP5中的魔术方法详解
2013/06/17 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
客服文员岗位职责
2013/11/29 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
感恩父母主题班会
2015/08/12 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang