微信小程序 modal:

这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点。

modal

modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性。

官方文档

.wxml

1
2
3
<modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}">
  这是对话框的内容。
</modal>

.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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弹框组件的介绍的更多相关文章

  1. 微信小程序之----弹框组件modal

    modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 ...

  2. [组件封装]微信小程序-底部弹框

    描述 模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果 源码 popup-bottom.wxml <!-- popup-bottom.wxml --> < ...

  3. 微信小程序 --- model弹框

    model弹框:在屏幕中间弹出,让你进行选择: 效果: 代码: <button type="primary" bindtap="btnclick"> ...

  4. 微信小程序底部弹框动画

    在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.ht ...

  5. 微信小程序之弹框modal

    官方文档 <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮&q ...

  6. 微信小程序下拉框组件

    >>下拉组件 1.组件结构: 2.index.js: //index.js Component({ /** * 组件的属性列表 */ properties: { propArray: { ...

  7. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  8. 微信小程序页面调用自定义组件内的事件

    微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...

  9. 微信小程序(二十)-UI组件(Vant Weapp)-01按装配置

    1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...

随机推荐

  1. HDU 2612 Find a way(双向bfs)

    题目代号:HDU 2612 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2612 Find a way Time Limit: 3000/1000 M ...

  2. SSM整合之---简单选课系统

    简单选课系统 一.实体图 二.功能 三.代码实现 1.SSM环境搭建 (1)pom.xml <dependencies> <dependency> <groupId> ...

  3. Updatexml函数再mysql中的作用

    函数的解释 http://www.blogjava.net/chenpengyi/archive/2006/07/11/57578.html 我的理解就是updatexml函数具有查询功能 并且会再x ...

  4. android图片的缩放、圆角处理

    android中图片缩放方法有三种:1,bitmapFactory:2,bitmap+metrix:3,thumbUtil 方法一:bitmapFactory: public static Bitma ...

  5. 20175221 《Java程序设计》第10周学习总结

    20175221   <Java程序设计>第10周学习总结 教材学习内容总结 第十二章主要内容有: 进程与线程 进程是程序的一次动态执行过程,它对应了从代码加载.执行至执行完毕的一个完整过 ...

  6. vue中下载excel的使用,后端链接两种情况,一个是链接,一个是文件流

    vue中下载excel使用 一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {     this ...

  7. SpringMVC - <mvc:default-servlet-handler/> 导致 Controller失效

    原文地址:http://blog.csdn.net/j080624/article/details/66969987

  8. post与get方法的区别

    1. GET请求:请求的数据会附加在URL之后,以?分割URL和传输数据,多个参数用&连接.URL的编码格式采用的是ASCII编码,而不是unicode,即是说所有的非ASCII字符都要编码之 ...

  9. Spring中基于java的配置

    Spring中为了减少XML配置,可以声明一个配置类类对bean进行配置,主要用到两个注解@Configuration和@bean 例子: 首先,XML中进行少量的配置来启动java配置: <? ...

  10. JMV监控工具之JConsole

    一.简介 JConsole是一个基于JMX的GUI工具,用于连接正在运行的JVM,它是Java自带的简单性能监控工具.下面以对tomcat的监控为例,带领大家熟悉JConsole这个工具. 二.配置 ...