微信小程序  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 相关文章推荐
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
javascript简单链式调用案例分析
May 10 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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
php flush类输出缓冲剖析
2008/10/19 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
php分页代码学习示例分享
2014/02/20 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
js保存当前路径(cookies记录)
2010/12/14 Javascript
理解Javascript闭包
2013/11/01 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python机器学习之随机森林(七)
2018/03/26 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
Python爬取网页信息的示例
2020/09/24 Python
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
最热门的自我评价
2013/12/30 职场文书
争论的故事教学反思
2014/02/06 职场文书
顶碗少年教学反思
2014/02/21 职场文书
疾病捐款倡议书
2014/05/13 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
python在package下继续嵌套一个package
2022/04/14 Python
vscode内网访问服务器的方法
2022/06/28 Servers