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


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中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
动态加载js文件简单示例
Apr 21 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
原生JS实现烟花效果
Mar 10 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实现留言板功能(代码详解)
2017/03/28 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python魔法方法-属性访问控制详解
2016/07/25 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
python 如何对logging日志封装
2020/12/02 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
联强国际笔试题面试题
2013/07/10 面试题
英文版网络工程师求职信
2013/10/28 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
文体活动实施方案
2014/03/27 职场文书
本科毕业生求职信
2014/06/15 职场文书
体育口号大全
2014/06/18 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
2014年宣传工作总结
2014/11/18 职场文书
村官个人总结范文
2015/03/03 职场文书
营运督导岗位职责
2015/04/10 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
团委副书记工作总结
2015/08/14 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis