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


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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
php密码生成类实例
2014/09/24 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
python单链表实现代码实例
2013/11/21 Python
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
中学教师教育感言
2014/02/21 职场文书
《母鸡》教学反思
2014/02/25 职场文书
触电现场处置方案
2014/05/14 职场文书
篮球比赛策划方案
2014/06/05 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
经费申请报告范文
2015/05/18 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python