微信小程序 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. 【CF1252L】Road Construction(基环树,最大流)

    题意:给定一张n点n边无重边自环的无向图,刚开始每条边都没有被选择,每条边上有一个颜色集合,必须从中选择一种 有K个工人,每个工人有颜色a[i],需要把工人分配到与其颜色相同的边上 问是否能有一种使得 ...

  2. selenium,控制滚动条

    今天写selenium用例的时候,遇见奇葩的问题,FF下是没有错误的,但是在chrome和ie下就会有问题,后来发现是 操作中点击一个按钮,在页面不可见,就会导致异常,解决方法如下: element ...

  3. Windows10 pro & ent 禁用自动更新

    为了节约可怜的一点点流量,这个设置还是很重要的. Step 1: 通过在命令提示符中执行gpedit.msc命令,打开组策略 Step 2: 打开管理模板->windows组件->wind ...

  4. 大v用户数据统计分析

    1,统计数据的基本情况,包括微博总数,用户总数,最活跃和最不活跃的用户id #!/bin/sh source_dir=/home/minelab/data/DATA source_file_name= ...

  5. java 根据省份证号-判断省份-性别-生日

    package com.nf147.manage.Test; import java.text.ParseException; import java.text.SimpleDateFormat; i ...

  6. js 放回上一页

    window.history.go(-1);//返回上一页不刷新 window.location.href = document.referrer;//返回上一页并刷新

  7. React Native商城项目实战06 - 设置安卓中的启动页

    1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegis ...

  8. 基于RANSAC的点云面分割算法

    该算法在RANSAC和空间检索树的基础上实现的. 算法思路: 1.点云抽希.法线估计 2.出局点索引存储声明 3.平面检测 for (size_t i = 0; i < cloudTemp-&g ...

  9. 基于球分割的空间二叉树检索算法(sphere-kdtree)

    sphere-kdtree算法思路说明 具体思路如下: 第一.球半径分割,即利用不同的球半径,将三维空间点(向量)分割成多块.所以首先要求确定的就是分割多少块,怎么设置半径最合理. 第二.三维空间点平 ...

  10. 破解Excel 工作表/薄密码

    新建excel 在右上角的ThisWorkbook右键插入模块复制下列CODE. Option Explicit Public Sub AllInternalPasswords()' Breaks w ...