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


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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
Element实现动态表格的示例代码
Aug 02 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实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
destoon复制新模块的方法
2014/06/21 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
Python缩进和冒号详解
2016/06/01 Python
python正则分析nginx的访问日志
2017/01/17 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Python字节单位转换实例
2019/12/05 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
python如何设置静态变量
2020/09/07 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
美国牛仔品牌:True Religion
2018/11/16 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
学校节能减排倡议书
2014/05/16 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
商务宴会祝酒词
2015/08/11 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书