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


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 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
vue实现同时设置多个倒计时
May 20 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
随机广告显示(PHP函数)
2006/10/09 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python使用minimax算法实现五子棋
2019/07/29 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
劳动模范事迹材料
2014/01/19 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript