博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于微信小程序 modal弹框组件的介绍
阅读量:6340 次
发布时间:2019-06-22

本文共 690 字,大约阅读时间需要 2 分钟。

微信小程序 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"
);
  
}
})

 

运行效果

转载于:https://www.cnblogs.com/cqlb/p/9494936.html

你可能感兴趣的文章
【每天一个Linux命令】12. Linux中which命令的用法
查看>>
软件接口数据一致性机制
查看>>
微服务架构介绍和RPC框架对比
查看>>
Debian下使用OpenLDAP 管理端
查看>>
泛型排序器TComparer
查看>>
9个offer,12家公司,35场面试,从微软到谷歌,应届计算机毕业生的2012求职之路...
查看>>
创建符合标准的、有语意的HTML页面——ASP.NET 2.0 CSS Friendly Control Adapters 1.0发布...
查看>>
Adobe驳斥Flash过度耗电论 称HTML5更耗电
查看>>
No!No!No! It's not fashion!
查看>>
艰困之道中学到的经验教训
查看>>
互联网生态建设落地五大挑战——保险科技生态建设 ...
查看>>
进行短视频app开发工作时,可以加入它来保护青少年 ...
查看>>
25G DAC无源高速线缆和25G光模块之间的区别
查看>>
乐乐茶完成近2亿元Pre-A轮融资,祥峰投资领投
查看>>
clickhouse修改时区
查看>>
CSS_定位
查看>>
第二十四章:页面导航(六)
查看>>
10 个 Linux 中方便的 Bash 别名
查看>>
全新 DOCKER PALS 计划上线,带给您不一样的参会体验! ...
查看>>
Android开发之自定义View(二)
查看>>