微信小程序  modal详解及实例代码

 更新时间:2016年11月09日 10:53:35   投稿:lqh  
这篇文章主要介绍了微信小程序 modal详解及实例代码的相关资料,需要的朋友可以参考下

微信小程序 开发文档,相关文章:

微信小程序  action-sheet

微信小程序 modal

微信小程序 toast

微信小程序 loading

微信小程序 modal

对话弹窗

属性名 类型 默认值 说明
title String   标题
hidden Boolean false 是否隐藏整个弹窗
no-cancel Boolean false 是否隐藏cancel按钮
confirm-text String 确定 confirm按钮文字
cancel-text String 取消 cancel按钮文字
bindconfirm EventHandle   点击确认触发的回调
bindcancel EventHandle   点击取消以及蒙层触发的回调

示例:

<modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
 这是对话框的内容。
</modal>

<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2">
 <view> 没有标题没有蒙层没有确定的modal </view>
 <view> 内容可以插入节点 </view>
</modal>

<view class="btn-area">
 <button type="default" bindtap="modalTap">点击弹出modal</button>
 <button type="default" bindtap="modalTap2">点击弹出modal2</button>
</view>

Page({
 data: {
 modalHidden: true,
 modalHidden2: true
 },
 modalTap: function(e) {
 this.setData({
 modalHidden: false
 })
 },
 modalChange: function(e) {
 this.setData({
 modalHidden: true
 })
 },
 modalTap2: function(e) {
 this.setData({
 modalHidden2: false
 })
 },
 modalChange2: function(e) {
 this.setData({
 modalHidden2: true
 })
 },
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • 微信小程序 Flex布局详解

    微信小程序 Flex布局详解

    这篇文章主要介绍了微信小程序 Flex布局详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序微信支付接入开发实例详解

    微信小程序微信支付接入开发实例详解

    这篇文章主要介绍了微信小程序微信支付接入开发实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • Electron 剪贴板实现示例详解

    Electron 剪贴板实现示例详解

    这篇文章主要为大家介绍了Electron 剪贴板实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JavaScript 执行上下文的视角详解this使用

    JavaScript 执行上下文的视角详解this使用

    这篇文章主要为以JavaScript 执行上下文的视角为大家讲清楚 this使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 微信小程序 图片边框解决方法

    微信小程序 图片边框解决方法

    这篇文章主要介绍了微信小程序 图片边框解决方法的相关资料,需要的朋友可以参考下
    2017-01-01
  • Java  Spring 事务回滚详解

    Java Spring 事务回滚详解

    这篇文章主要介绍了java Spring事务回滚的相关资料,需要的朋友可以参考下
    2016-10-10
  • javascript的setTimeout()使用方法总结

    javascript的setTimeout()使用方法总结

    这篇文章主要给大家分享javascript的setTimeout()使用方法总结,js的setTimeout方法用处比较多,通常用在页面刷新了、延迟执行了等等,下面我们一起来看看文章对该内容的具体总结吧,需要的朋友可以参考一下
    2021-11-11
  • qiankun 找不到入口问题彻底解决

    qiankun 找不到入口问题彻底解决

    这篇文章主要为大家介绍了qiankun 找不到入口问题彻底解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 15个值得收藏的JavaScript函数

    15个值得收藏的JavaScript函数

    在开发一个JavaScript项目时,经常会用到以前开发过的一些工具函数,收集这些函数,当你需要它们的时候,将节省你大量的开发时间,本文将给大家带来15个常用的工具函数,需要的小伙伴可以参考下
    2021-09-09
  • 移动开发之自适应手机屏幕宽度

    移动开发之自适应手机屏幕宽度

    这篇文章主要介绍了移动开发之自适应手机屏幕宽度的相关资料,网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方,需要的朋友可以参考下
    2016-11-11

最新评论