微信小程序 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. 字符串:StringBuilder()

    String 字符串常量 StringBuffer 字符串变量(线程安全) StringBuilder 字符串变量(非线程安全) [1]String和StringBuffer      String ...

  2. mac 的 ping 命令怎么停掉?

    Widnows下的Ping不会只Ping4次,mac 会不停的Ping下去,需要停止,按下键盘上的 control+c 键即可停掉 Ping 过程.

  3. selenium+键盘鼠标

    一.简单操作 1.点击(鼠标左键)页面按钮:click() 2.请空输入框:clear() 3.输入字符串:send_keys() 二.模拟键盘 模拟键盘的操作需要先导入键盘模块:from selen ...

  4. 在ThinkPHP框架(5.0.24)下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库,同时实现lazyload懒加载

    这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...

  5. jvm内存模型学习心得

    昨天面试了两家,备受打击,问的多的就是jvm内存,然额真的是一头雾水.工作中用到的真是少之又少,面试还得问道, 今天恶补了下,在此作以下总结: jvm分为5部分 1.程序计数器 jvm支持多线程运行, ...

  6. leetcode-mid-dynamic programming- Longest Increasing Subsequence-NO

    不会... 参考: 思路类似于coin那个题,for循环中在满足条件时就及时更新当下位置的信息 def lengthOfLIS(nums): """ :type nums ...

  7. Python深度学习读书笔记-6.二分类问题

    电影评论分类:二分类问题   加载 IMDB 数据集 from keras.datasets import imdb (train_data, train_labels), (test_data, t ...

  8. bash中的set, env, export unset的区别

    参考这篇文章很好 参考这篇文章2 -------------------------- == set显示的是当前shell的变量, 不同的shell, 它的私有变量是不同的 env是显示用户的变量, ...

  9. Python Module_subprocess_调用 Powershell

    目录 目录 前言 Powershell call Python Python call Powershell Powershell发送邮件 最后 前言 使用Python内建的subprocess模块, ...

  10. Python编程之列表操作实例详解【创建、使用、更新、删除】

    Python编程之列表操作实例详解[创建.使用.更新.删除] 这篇文章主要介绍了Python编程之列表操作,结合实例形式分析了Python列表的创建.使用.更新.删除等实现方法与相关操作技巧,需要的朋 ...