使用微信小程序开发弹出框应用实例详解


Posted in Javascript onOctober 18, 2018

使用微信小程序开发弹出框应用实例详解

view class="container" class="zn-uploadimg">	
<button type="primary"bindtap="showok">消息提示框</button> 	
<button type="primary"bindtap="modalcnt">模态弹窗</button> 	
<button type="primary"bindtap="actioncnt">操作菜单</button>
 </view>

1.消息提示——wx.showToast(OBJECT)

使用微信小程序开发弹出框应用实例详解

//show.js
//获取应用实例 
var app = getApp() 
Page({
	showok:function() {
		wx.showToast({
		 	title: '成功',
		 	icon: 'success',
		 	duration: 2000
		})
	}
})

使用微信小程序开发弹出框应用实例详解

2.模态弹窗——wx.showModal(OBJECT)

//show.js
//获取应用实例 
var app = getApp() 
Page({
	showok:function() {
		wx.showToast({
		 	title: '成功',
		 	icon: 'success',
		 	duration: 2000
		})
	}
})

使用微信小程序开发弹出框应用实例详解

//show.js
//获取应用实例 
var app = getApp() 
Page({
	modalcnt:function(){
		wx.showModal({
			title: '提示',
			content: '这是一个模态弹窗',
			success: function(res) {
				if (res.confirm) {
				console.log('用户点击确定')
				} else if (res.cancel) {
				console.log('用户点击取消')
				}
			}
		})
	}
})

使用微信小程序开发弹出框应用实例详解

3.操作菜单——wx.showActionSheet(OBJECT)

使用微信小程序开发弹出框应用实例详解

//show.js
//获取应用实例 
var app = getApp() 
Page({
	actioncnt:function(){
		wx.showActionSheet({
			itemList: ['A', 'B', 'C'],
			success: function(res) {
				console.log(res.tapIndex)
			},
			fail: function(res) {
				console.log(res.errMsg)
			}
		})
	}
})

使用微信小程序开发弹出框应用实例详解

4.指定modal弹出

使用微信小程序开发弹出框应用实例详解

指定哪个modal,可以通过hidden属性来进行选择。

<!--show.wxml-->
<view class="container" class="zn-uploadimg">	
<button type="primary"bindtap="modalinput">
modal有输入框
</button> 
</view>
<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm"> 
 <input type='text'placeholder="请输入内容" auto-focus/>
</modal>
//show.js 
//获取应用实例 
var app = getApp() 
Page({
	data:{
  hiddenmodalput:true,
  //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
 },
	//点击按钮痰喘指定的hiddenmodalput弹出框
	modalinput:function(){
		this.setData({
		 hiddenmodalput: !this.data.hiddenmodalput
		})
	},
	//取消按钮
	cancel: function(){
  this.setData({
   hiddenmodalput: true
  });
 },
 //确认
 confirm: function(){
  this.setData({
	  hiddenmodalput: true
	 })
 }
})

使用微信小程序开发弹出框应用实例详解

总结

以上所述是小编给大家介绍的使用微信小程序开发弹出框应用实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
详谈js模块化规范
Jul 07 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 #Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 #Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 #Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 #Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 #Javascript
vue中导出Excel表格的实现代码
Oct 18 #Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 #Javascript
You might like
扩展你的 PHP 之入门篇
2006/12/04 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
python实现装饰器、描述符
2018/02/28 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
维德科技C#面试题笔试题
2015/12/09 面试题
机电专业体育教师求职信
2013/09/21 职场文书
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
个人自荐信
2013/12/05 职场文书
厂长岗位职责
2014/02/19 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
元旦标语大全
2014/10/09 职场文书