微信小程序  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 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
javascript实现切换td中的值
Dec 05 Javascript
javascript操作数组详解
Dec 17 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 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新建文件自动编号的思路与实现
2011/06/27 PHP
PHP读取xml方法介绍
2013/01/12 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
遍历jquery对象的代码分享
2011/11/02 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
python 自动重连wifi windows的方法
2018/12/18 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
python可以用哪些数据库
2020/06/22 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
党委书记岗位职责
2013/11/24 职场文书
小学校长汇报材料
2014/08/20 职场文书
大学生暑期实践报告
2015/07/13 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL