关于微信小程序 modal弹框组件的介绍
微信小程序 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弹框组件的介绍的更多相关文章
- 微信小程序之----弹框组件modal
modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 ...
- [组件封装]微信小程序-底部弹框
描述 模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果 源码 popup-bottom.wxml <!-- popup-bottom.wxml --> < ...
- 微信小程序 --- model弹框
model弹框:在屏幕中间弹出,让你进行选择: 效果: 代码: <button type="primary" bindtap="btnclick"> ...
- 微信小程序底部弹框动画
在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.ht ...
- 微信小程序之弹框modal
官方文档 <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮&q ...
- 微信小程序下拉框组件
>>下拉组件 1.组件结构: 2.index.js: //index.js Component({ /** * 组件的属性列表 */ properties: { propArray: { ...
- [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- 微信小程序(二十)-UI组件(Vant Weapp)-01按装配置
1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...
随机推荐
- Java课堂动手动脑
1.使用Files. walkFileTree()找出指定文件夹下所有大于指定大小(比如1M)的文件: 代码: package test; import java.io.IOException; im ...
- 完整的Socket代码
先上图 列举一个通信协议 网关发送环境数据 此网关设备所对应的所有传感器参数,格式如下: 网关发送: 包长度+KEY值+请求类型+发送者+接收者+消息类型+消息内容 说明: 包长度:short int ...
- Eclipse通过JDBC连接MySQL数据库的步骤(最原始的几个步骤)
java可以兼容目前市面上所有类型的数据库,主要是因为提供了两个接口,一个用于连接目标数据库,一个用于向数据库中传输SQL命令. Connection接口——连接目标数据库: Statement 接 ...
- springboot(三).springboot用最简单的方式整合mybatis
Springboot整合mybatis 在众多的orm框架中,我使用最多的,最习惯的,也是目前使用最广泛的就是mybatis,接下来我们就去将springboot整合mybatis 对于spring ...
- easyui 功能栏onclick传递object参数
{ field: 'Delete', title: '操作', width: 60, formatter: function (value, row, index) { var jrow = []; ...
- 实现mypwd(选做)
实现mypwd(选做) 任务清单 1 学习pwd命令 2 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3 实现mypwd 4 测试mypwd (一)pwd命令的学习 1.pw ...
- 把一个树莓派SD卡系统和文件迁移到空SD卡中
1.打开win32diskimager软件读出SD卡树莓派系统和文件到电脑的镜像文件中, 2.使用 SD card formatter 格式化SD卡 3.再用win32diskimager往空SD卡写 ...
- 一、Jmeter启动报错:Could not initialize class org.apache.jmeter.gui.util.MenuFactory
1.下载: plugins-manager.jar 包 2.地址:https://jmeter-plugins.org/install/Install/ 3.将jar包放到lib/ext 4.重启jm ...
- VS2008重置默认环境
Microsoft Visual Studio 2008 -> Visual Studio Tools -> Visual Studio 2008命令提示 进入Common7\IDE,然后 ...
- 【IOS打包】ARCHIVE FAILED:Command CodeSign failed with a nonzero exit code
[问题] [解决办法] 用xcode打开项目 command + k 重启电脑 参照:xcode打包报错command codesign failed with a nonzero exit code ...