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

- .wxml
<modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}">
这是对话框的内容。
</modal>
- .js
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的更多相关文章
- [组件封装]微信小程序-底部弹框
描述 模仿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.按装 ...
- 小程序 模态对话框自定义组件(modal)
1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信 ...
随机推荐
- 一个设置 material design icon的插件工具
一个设置 material design icon的插件工具 github地址:https://github.com/konifar/android-material-design-icon-gene ...
- 关于this指针理解
1. this指针的用处: 一个对象的this指针并不是对象本身的一部分,不会影响sizeof(对象)的结果.this作用域是在类内部,当在类的非静态成员函数中访问类的非静态成员的时候,编译器会自动将 ...
- hdu_5418_Victor and World(状压DP+Floyd)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5418 题意:给你n个点,和一些边,找一条路径经过全部的点,并回到起点,问最小的花费是多少, 题解:m& ...
- Javascript面向对象编程(二):构造函数的继承
这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个" ...
- spring,hibernate配置事务
1. 新建java project 2. 引入jar 3. src下新建package:com.web.model, com.web.dao, com.web.service, bean.xml 4. ...
- Apache多端口配置
修改http.conf监听多个端口 Listen 80 Listen 8001 Listen 8002 配置站点 <VirtualHost *:8001> ServerName *:800 ...
- offsetXXX和scollXXX的一些操作
<!doctype html><html><head><meta charset="utf-8"><title>offs ...
- java数据类型,hibernate数据类型,标准sql数据类型之间的对应表
Hibernate API简介 其接口分为以下几类: l 提供访问数据库的操作的接口: l 用于配置Hibernate的接口: l 回调接口 l ...
- ural1097 Square Country 2
Square Country 2 Time limit: 1.0 secondMemory limit: 64 MB The Square Parliament of the Square count ...
- android 画图之setXfermode .
setXfermode 设置两张图片相交时的模式 我们知道 在正常的情况下,在已有的图像上绘图将会在其上面添加一层新的形状. 如果新的Paint是完全不透明的,那么它将完全遮挡住下面的Paint: 而 ...