微信小程序使用modal组件弹出对话框功能示例
更新时间：2017年11月29日 14:57:50 作者：FutrueJet
这篇文章主要介绍了微信小程序使用modal组件弹出对话框功能,结合实例形式分析了微信小程序model组件相关属性及事件响应操作技巧,需要的朋友可以参考下
本文实例讲述了微信小程序使用modal组件弹出对话框功能。分享给大家供大家参考，具体如下：
1、效果展示
2、关键代码
①、index.wxml
<view>提示：{{tip}}</view>
<button type="default" bindtap="showModal">点击我弹出modal对话框</button>
<view>
<modal title="modal对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好，我是modal对话框</modal>
</view>
②、index.js
Page({
data:{
// text:"这是一个页面"
tip:'',
buttonDisabled:false,
modalHidden:true,
show:false
},
showModal:function(){
this.setData({
modalHidden:!this.data.modalHidden
})
},
modalBindaconfirm:function(){
this.setData({
modalHidden:!this.data.modalHidden,
show:!this.data.show,
tip:'您点击了【确认】按钮！',
buttonDisabled:!this.data.buttonDisabled
})
},
modalBindcancel:function(){
this.setData({
modalHidden:!this.data.modalHidden,
tip:'您点击了【取消】按钮！'
})
}
})
③、完整实例代码点击此处本站下载。
希望本文所述对大家微信小程序开发有所帮助。
相关文章
这篇文章主要介绍了浅谈document.write()输出样式，十分的简单实用，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了vscode使用Prettier Code插件的详细教程,本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
本文主要对JavaScript中定义对象原型的两种使用方法进行介绍，具有很好的参考价值，下面就跟小编一起来看下吧2016-12-12
下面小编就为大家带来一篇深入理解js promise chain。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
在 JavaScript 中，可以使用 performance.now() API 来评测代码的运行速度。该 API 返回当前页面的高精度时间戳，您可以在代码执行前后调用它来计算代码执行所需的时间，这篇文章主要介绍了JavaScript 评测代码运行速度,需要的朋友可以参考下2023-02-02
JS中confirm,alert,prompt函数使用区别有哪些呢？2011-01-01
本篇文章主要介绍了two.js之实现动画效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了JavaScript中如何计算字符串文本的宽度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
本篇文章主要介绍了详解JS中遍历语法的比较 ，主要介绍for循环、forEach、for...in、for...of的用法和缺点，有兴趣的可以了解一下。2017-04-04
这篇文章主要为大家简单介绍一下JS中如何实现二叉树层序遍历，感兴趣的小伙伴可以详细参考阅读2023-03-03
最新评论