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


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同时按下两个方向键
Dec 01 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
vue3不同环境下实现配置代理
May 25 Vue.js
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
牡丹941资料
2021/03/01 无线电
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
JavaScript定时器使用方法详解
2020/03/26 Javascript
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python程序运行原理图文解析
2018/02/10 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
2015年中秋节主持词
2015/07/30 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
2016年社区文体活动总结
2016/04/06 职场文书