您好,欢迎来到学长源码!
热门推荐: html模板 网站模板 magento主题 织梦模板 微信小程序 h5小游戏 Linux教程 源码教程 数据库教程 Magento 2文档 android教程 IOS教程 DedeCMS文档 微信开发

JSP源码

C#源码

企业网站

微信小程序使用modal组件弹出对话框Demo

源码类别:微信小程序
源码上传:学长源码
更新时间:2017-11-30
授权形式:免费版
源码来源:网络收集
推荐等级:★★★★★
资源链接:下载地址

微信小程序使用modal组件弹出对话框Demo,结合实例形式分析了微信小程序model组件相关属性及事件响应操作技巧,具体如下:

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:'您点击了【取消】按钮!'
  })
 }
})

转载请注明:学长源码 » 微信小程序使用modal组件弹出对话框Demo

微信小程序使用modal组件弹出对话框Demo - 下载地址:

下载须知:

本站所有源码若无特别说明,默认解压密码为:www.xz-src.com
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵犯您的版权,请及时联系QQ 604173476获发邮件到该QQ邮箱,我们将第一时间处理。

上一篇 下一篇

图文推荐