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


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
Sep 24 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
JS轮播图的实现方法
Aug 24 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
vue 页面跳转的实现方式
Jan 12 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
一百行JS代码实现一个校验工具
2019/04/30 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
flask session组件的使用示例
2018/12/25 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
中文专业求职信
2014/06/20 职场文书
效能风暴心得体会
2014/09/04 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
婚宴主持词
2015/06/30 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书