微信小程序使用modal组件弹出对话框功能示例


Posted in Javascript onNovember 29, 2017

本文实例讲述了微信小程序使用modal组件弹出对话框功能。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序使用modal组件弹出对话框功能示例

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

③、完整实例代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
JS数组的常见用法实例
Feb 10 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 #Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 #Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 #Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 #Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 #Javascript
node.js中axios使用心得总结
Nov 29 #Javascript
Vue2.0用户权限控制解决方案
Nov 29 #Javascript
You might like
php字符串按照单词进行反转的方法
2015/03/14 PHP
php计算整个目录大小的方法
2015/06/01 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
python实现图片变亮或者变暗的方法
2015/06/01 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
中软Java笔试题
2012/11/11 面试题
工厂总经理岗位职责
2014/02/07 职场文书
关于保护环境的标语
2014/06/09 职场文书
司考复习计划
2015/01/19 职场文书
质量保证书格式
2015/02/27 职场文书
保安辞职信范文
2015/02/28 职场文书
餐厅开业活动方案
2019/07/08 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
python - asyncio异步编程
2021/04/06 Python