微信小程序开发之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 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
jQuery 创建Dom元素
May 07 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
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
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
js实现微信分享代码
2020/10/11 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
vue的for循环使用方法
2019/02/12 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
python查找指定具有相同内容文件的方法
2015/06/28 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
python 实现表情识别
2020/11/21 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
学生党员思想汇报
2013/12/28 职场文书
运动会致辞稿50字
2014/02/04 职场文书
团日活动总结报告
2014/06/25 职场文书
建筑学专业自荐书
2014/07/09 职场文书
党员自我对照检查材料
2014/08/19 职场文书
六一儿童节活动总结
2014/08/27 职场文书
培养联系人考察意见
2015/06/01 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android