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


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 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
小程序使用分包的示例代码
Mar 23 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
提高php编程效率技巧
2015/08/13 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
python机器学习之神经网络(二)
2017/12/20 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
linux面试相关问题
2012/08/11 面试题
小饰品店的创业计划书范文
2013/12/28 职场文书
单位在职证明范本
2014/01/09 职场文书
创先争优公开承诺书
2014/08/30 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
保研导师推荐信
2015/03/25 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
详解JAVA的控制语句
2021/11/11 Java/Android