微信小程序  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 动态添加表格行
Jun 22 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
js给table赋值的实例代码
Oct 13 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 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批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
讲解Python中的递归函数
2015/04/27 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python实现人民币大写转换
2018/06/20 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python把转列表为集合的方法
2019/06/28 Python
python中count函数简单的实例讲解
2020/02/06 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
前台领班岗位职责
2013/12/04 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
交通处罚决定书
2015/06/24 职场文书