微信小程序  modal详解及实例代码


Posted in Javascript onNovember 09, 2016

微信小程序 开发文档,相关文章:

微信小程序 modal

对话弹窗

属性名 类型 默认值 说明
title String   标题
hidden Boolean false 是否隐藏整个弹窗
no-cancel Boolean false 是否隐藏cancel按钮
confirm-text String 确定 confirm按钮文字
cancel-text String 取消 cancel按钮文字
bindconfirm EventHandle   点击确认触发的回调
bindcancel EventHandle   点击取消以及蒙层触发的回调

示例:

<modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
 这是对话框的内容。
</modal>

<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2">
 <view> 没有标题没有蒙层没有确定的modal </view>
 <view> 内容可以插入节点 </view>
</modal>

<view class="btn-area">
 <button type="default" bindtap="modalTap">点击弹出modal</button>
 <button type="default" bindtap="modalTap2">点击弹出modal2</button>
</view>
Page({
 data: {
 modalHidden: true,
 modalHidden2: true
 },
 modalTap: function(e) {
 this.setData({
 modalHidden: false
 })
 },
 modalChange: function(e) {
 this.setData({
 modalHidden: true
 })
 },
 modalTap2: function(e) {
 this.setData({
 modalHidden2: false
 })
 },
 modalChange2: function(e) {
 this.setData({
 modalHidden2: true
 })
 },
})

微信小程序  modal详解及实例代码

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 #Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 #Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 #Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 #Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 #Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 #Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 #Javascript
You might like
多数据表共用一个页的新闻发布
2006/10/09 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
优秀团员自我评价范文
2014/04/23 职场文书
股指期货心得体会
2014/09/13 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
终止劳动合同协议书
2014/10/05 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android