微信小程序 modal详解及实例代码
微信小程序 开发文档,相关文章:
微信小程序 action-sheet
微信小程序 modal
微信小程序 toast
微信小程序 loading
微信小程序 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弹出框遮罩层组件(可带文本框)
modal弹出框遮罩层可实现提示信息.验证码等功能 然而在官方文档已经删除了modal的页面,说要废弃modal 就个人而言modal组件无法被wx.showModal完全替代.大家都知道小程序的wxml的组件可以通过改变js的值实现重新渲染,而接口是无法实现的 有同感的也不止博主一个人 官方18-5-13的建议要实现此类功能也是用modal 属性 说下遮罩层实现,通过改变modal的hidden属性来控制是否显示,通过监听confirm方法来确认提交,通过bindinput来监听modal内表
-
微信小程序 modal弹框组件详解
微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confir
-
微信小程序自定义modal弹窗组件的方法详解
微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮.效果如下. 首先我们可以在跟目录下创建一个components文件夹存放所有的组件.新建一个modal文件夹,下面新建modal.js.modal.json.modal.wxml.modal.wxss四个文件. modal.wxml布局文件: <view class
-
浅析微信小程序modal弹窗关闭默认会执行cancel问题
在我们使用小程序的modal组件时候,有的时候会碰到一个问题,那就是弹框的关闭,我们并没有选择取消或确定,而是点击弹框之外的部分,这个时候弹框会关闭,按理来说不会触发取消和确定的绑定事件,但是有的时候点击弹框之外的部分来关闭弹框会触发取消(cancel)绑定的事件,这是为什么呢? 如图是wxml页面 以下是页面对应的js内容 也就是说,就算我们不点击取消,点击弹框之外的部分,也会执行modelCancel方法. 后来发现,是header头的content-type在作怪,我们把header头里的
-
微信小程序使用modal组件弹出对话框功能示例
本文实例讲述了微信小程序使用modal组件弹出对话框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ①.index.wxml <view>提示:{{tip}}</view> <button type="default" bindtap="showModal">点击我弹出modal对话框</button> <view> <modal title="modal对话框"
-
微信小程序 modal组件详细介绍
modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件--> <button bindtap="listenerButton" type="primary">弹出modal</button> <!--弹出框--> <modal title="退出应用" hidden="{{hiddenModal
-
微信小程序实现自定义modal弹窗封装的方法
前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo
-
微信小程序 modal详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 modal 对话弹窗 属性名 类型 默认值 说明 title String 标题 hidden Boolean false 是否隐藏整个弹窗 no-cancel Boolean false 是否隐藏cancel按钮 confirm-text String 确定 confirm按钮文字 cancel-text String 取消 ca
-
微信小程序 modal详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 modal 对话弹窗 属性名 类型 默认值 说明 title String 标题 hidden Boolean false 是否隐藏整个弹窗 no-cancel Boolean false 是否隐藏cancel按钮 confirm-text String 确定 confirm按钮文字 cancel-text String 取消 ca
-
微信小程序 action-sheet详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 action-sheet 属性名 类型 默认值 说明 hidden Boolean true 是否隐藏 bindchange EventHandle 点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance
-
微信小程序 toast 详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 toast 消息提示框 属性名 类型 默认值 说明 duration Float 1500 hidden设置false后,触发bindchange的延时,单位毫秒 hidden Boolean false 是否隐藏 bindchange EventHandle duration延时后触发 示例代码: <view class="
-
微信小程序 loading 详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 loading 属性名 类型 默认值 说明 hidden Boolean false 是否隐藏 示例代码: <view class="body-view"> <loading hidden="{{hidden}}"> 加载中... </loading> <butto
-
微信小程序 action-sheet详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 action-sheet 属性名 类型 默认值 说明 hidden Boolean true 是否隐藏 bindchange EventHandle 点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance
-
微信小程序 slider 详解及实例代码
微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器 属性名 类型 默认值 说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大
-
微信小程序 框架详解及实例应用
快速了解微信小程序的使用,一个根据小程序的框架开发的todos app 微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是
-
微信小程序 数据绑定详解及实例
微信小程序最近要火,火不火看看微信用户就知道了,做前端的朋友可以大展身手,跟上脚步,这里来介绍下微信小程序的数据绑定. >>>数据视图绑定 做前端开发的同学,尤其是WEB前端,每天都要跟视图打交道,假如你是用过jQuery,你就能体会到jQuery的代码冗余和操作不便性,需要手动管理视图和对象的数据一致性. 以下数据和对象等同. 传统的视图和数据绑定 那么微信小程序是通过什么方法来管理视图和对象绑定的呢?状态模式-单向数据流. 状态模式定义一个对象,这个对象可以通过管理其状态从而使得应用
-
微信小程序蓝牙连接小票打印机实例代码详解
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapter({ success: function(res) { wx.getBluetoothAdapterState({ success: function(res) { if (res.available) { if (res.discovering) { wx.stopBluetoothDevic
随机推荐
- jQuery中prevAll()方法用法实例
- 让Win2008用户权限也可以关机的方法
- 使用批处理文件生成文件列表清单
- J2SE基础之在Eclipse中运行hello world
- js中的屏蔽的使用示例
- PHP队列用法实例
- C#中HashTable的定义与使用方法
- C语言设计图书登记系统与停车场管理系统的实例分享
- Android搜索框组件SearchView的基本使用方法
- CentOS6.5下安装Mysql5.7.18的教程详解
- JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
- php解决DOM乱码的方法示例代码
- Ajax获取页面被缓存的解决方法
- 详谈表单重复提交的三种情况及解决方法
- jQuery的控件及事件(输入控件及回车事件)使用示例
- 使用jquery制作弹出框效果
- Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
- java更改图片大小示例分享
- 深入理解hibernate的三种状态
- va_list(),va_start(),va_arg(),va_end() 详细解析