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


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 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
python方法生成txt标签文件的实例代码
2018/05/10 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
jupyter notebook清除输出方式
2020/04/10 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
Python将字典转换为XML的方法
2020/08/01 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
写给爸爸的道歉信
2014/01/15 职场文书
寒假实习自荐信
2014/01/26 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
怎样写辞职信
2015/02/27 职场文书
法制教育主题班会
2015/08/13 职场文书
mysql优化
2021/04/06 MySQL
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
nginx中proxy_pass各种用法详解
2021/11/07 Servers