微信小程序开发之toast等弹框提示使用教程


Posted in Javascript onJune 08, 2017

介绍

微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT)

看下有关参数说明:

微信小程序开发之toast等弹框提示使用教程

代码很简单:

wx.showToast({
 title: '成功',
 icon: 'succes',
 duration: 1000,
 mask:true
 })

微信小程序开发之toast等弹框提示使用教程

mask属性好像并没有起作用。有一点值得注意的是提示的延迟时间是有限制的,最大10000毫秒。

还有一个函数是wx.hideToast() ,这个是隐藏toast,主要用于显示加载提示的时候用到,如:

wx.showToast({
 title: '加载中',
 icon: 'loading',
 duration: 10000
})

setTimeout(function(){
 wx.hideToast()
},2000)

本来加载时间是10000毫秒的,然后2000毫秒的时候就隐藏了,这个具体情况而定了哈。

第二个弹窗是模态弹窗:wx.showModal(OBJECT)

参数如下:

微信小程序开发之toast等弹框提示使用教程

这个跟我们Android里面的Dialog相似,效果如下:

微信小程序开发之toast等弹框提示使用教程

代码如下:

wx.showModal({
 title: '提示',
 content: '模态弹窗',
 success: function (res) {
 if (res.confirm) {
 console.log('用户点击确定')
 }else{
 console.log('用户点击取消')
 }

 }
 })

最后一个是操作菜单:wx.showActionSheet(OBJECT)

这个函数我们在上一篇文章用过,这里说一下也无妨。

先看一下参数介绍:

微信小程序开发之toast等弹框提示使用教程

success有一个返回参数:

微信小程序开发之toast等弹框提示使用教程

这里直接贴官方实例了:

wx.showActionSheet({
 itemList: ['A', 'B', 'C'],
 success: function(res) {
 console.log(res.tapIndex)
 },
 fail: function(res) {
 console.log(res.errMsg)
 }
})

效果图:

微信小程序开发之toast等弹框提示使用教程

这里有个小问题,弹出showActionSheet之后,点击取消或者阴影处,会执行完fail之后,继续执行success函数,当然了,这里肯定有办法解决的,success其实有两个返回参数,除了tapIndex之外,还有一个就是cancle,cancle就是是否取消,返回一个boolean,在弹出这个框之后在success里面做个判断,if (!res.cancel) {做不取消的操作就行了}。当然了,你也可以自己来定义。

下面看个自定义弹窗的:

wxml:

<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
 <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}" bindtap="navigate">
 <text class="title">{{title}}</text>
 </view>

css:

.commodity_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.2;
 overflow: hidden;
 z-index: 1000;
 color: #fff;
}

.commodity_attr_box {
 width: 100%;
 overflow: hidden;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 2000;
 height: 60px;
 background: #fff;

}

.title {
 height: 100%;
 width: 100%;
 position: fixed;
 text-align: center;
 margin-top: 20px;
 margin-bottom: 20px;

}

js:

showView() {
 // 显示遮罩层
 var animation = wx.createAnimation({
 duration: 200,
 timingFunction: "linear",
 delay: 0
 })
 this.animation = animation
 animation.translateY(300).step()
 this.setData({
 animationData: animation.export(),
 showModalStatus: true
 })
 setTimeout(function () {
 animation.translateY(0).step()
 this.setData({
 animationData: animation.export()
 })
 }.bind(this), 200)
 },

 hideModal: function () {
 this.hideView();
 },

 hideView() {
 // 隐藏遮罩层
 var animation = wx.createAnimation({
 duration: 200,
 timingFunction: "linear",
 delay: 0
 })
 this.animation = animation
 animation.translateY(300).step()
 this.setData({
 animationData: animation.export(),
 })
 setTimeout(function () {
 animation.translateY(0).step()
 this.setData({
 animationData: animation.export(),
 showModalStatus: false
 })
 }.bind(this), 200)
 }

启用动画来做,效果杠杠的,自己动手来试试。

也可以使用action-sheet来布局,如下:

<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
 <block wx:for-items="{{actionSheetItems}}">
 <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
 </block>
 <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
Page({
data: {
 actionSheetHidden: true,
 actionSheetItems: items
 },
 actionSheetTap: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 },
 actionSheetChange: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 }
}
})

就是这么简单,赶紧动起来试试吧。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
javascript实现简单打字游戏
Oct 29 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
javascript实现二叉树遍历的代码
Jun 08 #Javascript
微信小程序tabbar不显示解决办法
Jun 08 #Javascript
javascript实现二叉树的代码
Jun 08 #Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 #Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 #Javascript
angular实现图片懒加载实例代码
Jun 08 #Javascript
微信小程序日历组件calendar详解及实例
Jun 08 #Javascript
You might like
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php简单获取复选框值的方法
2016/05/11 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
Python中属性和描述符的正确使用
2016/08/23 Python
python 调用HBase的简单实例
2016/12/18 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
化学教师教学反思
2014/01/17 职场文书
上党课的心得体会
2014/09/02 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
会计师事务所实习证明
2014/11/16 职场文书
初三英语教学反思
2016/02/15 职场文书