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


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的变量作用域和this指针的讨论
Dec 16 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 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循环输出数据库内容的代码
2008/05/24 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python re模块介绍
2014/11/30 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
python 字典的打印实现
2019/09/26 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
python3 字符串知识点学习笔记
2020/02/08 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
生物科学专业个人求职信范文
2013/12/05 职场文书
环保倡议书400字
2014/05/15 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
经营场所使用证明
2015/06/19 职场文书
优秀志愿者感言
2015/08/01 职场文书
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android