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


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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
JQuery 学习笔记 选择器之五
Jul 23 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
解决ele ui 表格表头太长问题的实现
Nov 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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
签字仪式主持词
2015/07/03 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python