微信小程序 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. sh_06_函数的返回值

    sh_06_函数的返回值 def sum_2_num(num1, num2): """对两个数字的求和""" result = num1 + ...

  2. jenkins 管理员密码重置

    jenkins管理员 admin的密码忘记怎么重置呢? 修改admin的加密密码为123456的加密密码 #jbcrypt:$2a$10$MiIVR0rr/UhQBqT.bBq0QehTiQVqgNp ...

  3. maven 配置私服 连接

    两种方法: 1.在单个项目的pom.xml中使用 私服的连接地址,这样只对该项目起作用. 2.在maven的setting.xml配置中添加私服的连接地址.这样对所有项目起作用. 本文章只演示第二种方 ...

  4. ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'ambari'

    配置Ambari远程maridb 报错: ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'ambari' ...

  5. web编辑器的快捷键

    alt 键:可以同时选中多个光标 .box 按住 tab 键 可以快速的 <div class="box"></div> #box 按住 tab 键 可以快 ...

  6. webpack插件之webpack-dev-server

    webpack插件之webpack-dev-server webpack插件 自动化 webpack-dev-server  现在只需要使用 npm run build指令就可以自动打包,并自动处理好 ...

  7. 旋转数组 空间复杂度为O(1) 的2 种方法 + 1种空间复杂度O(n)

    题目地址 : 旋转数组. 网上好多不是根本就是错的,就是空间复杂度不是真正为1 下面总结一下 方法1 普通方法(空间复杂度不满足要求,但是题目并不会判错,说明他们没用对空间进行校验) ··· publ ...

  8. web开发中会话跟踪的方法

    1. 什么是会话 会话是指一个终端用户(服务器)与交互系统(客户端)进行通讯的过程. 2. 什么是会话跟踪 对同一个用户对服务器的连续的请求和接受响应的监视.(将用户与同一用户发出的不同请求之间关联, ...

  9. docker nginx ssl

    docker run -d -p 80:80 -p 443:443 -v $(pwd)/conf/conf.d:/etc/nginx/conf.d -v $(pwd)/cert:/etc/nginx/ ...

  10. if you wanna the rainbow, you have to deal with the rain.

    bulk. n. 大量 reluctant. adj. 不情愿的 terrorist. n. 恐怖分子 recognition. n. 认出 tout.v. 兜售 conceal.v. 隐藏 dras ...