微信小程序 modal组件详细介绍

modal弹出框常用在提示一些信息比如：退出应用，清楚缓存，修改资料提交时一些提示等等。

常用属性：

wxml

<!--监听button点击事件-->
<button bindtap="listenerButton" type="primary">弹出modal</button>

<!--弹出框-->
<modal
 title="退出应用"
  hidden="{{hiddenModal}}"
  confirm-text="再看看"
  cancel-text="退出"
  bindconfirm="listenerConfirm"
  bindcancel="listenerCancel" >
  您是否真的要退出应用
  </modal>

js

Page({
 data:{
 // text:"这是一个页面"
 hiddenModal: true
 },

 listenerButton:function() {
  this.setData({
   hiddenModal: !this.data.hiddenModal
  })
 },

 listenerConfirm:function() {
  this.setData({
   hiddenModal: true
  })
 },

 listenerCancel:function() {
  this.setData({
   hiddenModal: true
  })
 },

 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

相关文章：

hello WeApp                     icon组件
Window                            text组件                                switch组件
tabBar底部导航               progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期                    checkbox组件                      toast组件
模块化详                     form组件详                     loading 组件
数据绑定                           input 组件                             navigator 组件
View组件                          picker组件                            audio 组件
scroll-view组件                 radio组件                        video组件
swiper组件                        slider组件                            Image组件

赞 (0)

相关推荐

  • 微信小程序 for 循环详解

    微信小程序 for 循环详解

    1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu

  • 微信小程序 modal弹框组件详解

    微信小程序 modal弹框组件详解

    微信小程序  modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confir

  • 微信小程序（应用号）简单实例应用及实例详解

    微信小程序（应用号）简单实例应用及实例详解

    Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

  • 微信小程序下载工具及调试详解

    昨天晚些时候微信团队发布了微信小程序开发者工具.微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序.以下是官方文档,内含小程序开发者工具下载地址及调试指南. 下载地址:开发者工具0.9.092300版 windows 64版:windows 32版:mac版 为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能. devtools 扫码登录 启动工具时,

  • 微信小程序 (十七)input 组件详细介绍

    微信小程序 (十七)input 组件详细介绍

    input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"

  • 微信小程序版的知乎日报开发实例

    微信小程序版的知乎日报开发实例

    先看看效果图 开发环境准备 小程序 出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载 微信开发者工具 就可以使用了, 创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了. 目录结构 1.app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息 2.pages 存放页面文件 3.utils 工具类代码 4.images 图片资源文件 小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构.样式.

  • 微信小程序 数据访问实例详解

    微信小程序 数据访问实例详解

    先简单说一下,小程序的结构 如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的 数据访问,如果懂点ajax,都不是问题,没啥好讲的 微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问

  • 微信小程序 框架详解及实例应用

    微信小程序 框架详解及实例应用

    快速了解微信小程序的使用,一个根据小程序的框架开发的todos app 微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是

  • 微信小程序 （八）View组件详细介绍

    微信小程序 （八）View组件详细介绍

    刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-direction: 主要两个特性"row"横向排列"column"纵向排列 justify-content 主轴的对齐方式(如果flex-direction为row则主轴就是水平方向) 可选属性 ('flex-start', 'flex-end', 'center', 'space-between', 'spa

  • 微信小程序 modal组件详细介绍

    微信小程序 modal组件详细介绍

    modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件--> <button bindtap="listenerButton" type="primary">弹出modal</button> <!--弹出框--> <modal title="退出应用" hidden="{{hiddenModal

  • 微信小程序 toast组件详细介绍

    微信小程序 toast组件详细介绍

    toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的 主要属性: wxml <!--点击button触发toast--> <button type="primary" bindtap="listenerButton">点击显示toast</button> <!--toast消息框显示3秒,并绑定事件-->

  • 微信小程序 http请求详细介绍

    微信小程序 http请求详细介绍

    在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主 设置域名 要微信小程序进行网络通信,必须先设置域名,不然会出现错误: URL 域名不合法,请在 mp 后台配置后重试

  • 微信小程序 wx:key详细介绍

    微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例 子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key 的值以两种形式提供 字符串,代表在 for 循环的 array 中 item 的某

  • 微信 小程序Demo导入详细介绍

    微信 小程序Demo导入详细介绍

    微信小程序一出,立马炸开了锅,都去搭建自己的开发环境,我这里也来尝尝先,之前发了一篇文章,有人问Demo怎么导入? Demo源代码(来自网络) 百度: https://pan.baidu.com/s/1o8hJFuU (密码: bsky) 360: https://yunpan.cn/ckvXAacJjvsgR (提取码:3327) demo导入方式: 打开"微信web开发者工具" -->添加项目-->填写AppID(随便填).项目名称(随便填),选择本地开发目录(Demo

  • 微信小程序 Mustache语法详细介绍

    微信小程序  Mustache语法详解 最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序  Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档.比如小程序的wxml中的代码: {{userInfo.nick

  • 微信小程序 闭包写法详细介绍

    微信小程序 闭包写法 在入口处的 app.js 中定义了一个获取用户 OpenId 的函数,在微信的登录接口 wx.login 中发起网络请求.这个函数传入一个回调函数 cb getOpenIdData: function(cb) { var that = this //调用登录接口 wx.login({ success: function(res) { wx.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', data:

  • 微信小程序 自定义创建详细介绍

    微信小程序 自定义创建详细介绍

    微信小程序 自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家.  微信小程序  自定义创建 自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录), 没哪个文件, 哦 原来是 app.json. 还记得 .json是什么文件不, 对喽, 全局配置文件. 没有配置文件就像没有汽油的布加迪, 跑起来才怪. 话

  • 微信小程序  自定义创建详细介绍

    微信小程序  自定义创建详细介绍

    微信小程序 自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家.  微信小程序  自定义创建 自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录), 没哪个文件, 哦 原来是 app.json. 还记得 .json是什么文件不, 对喽, 全局配置文件. 没有配置文件就像没有汽油的布加迪, 跑起来才怪. 话

  • 微信小程序  Mustache语法详细介绍

    微信小程序  Mustache语法详解 最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序  Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档.比如小程序的wxml中的代码: {{userInfo.nick

随机推荐