微信小程序开发之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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
python运行其他程序的实现方法
2017/07/14 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
django基础学习之send_mail功能
2019/08/07 Python
Python接收手机短信的代码整理
2020/08/02 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
使用Python实现音频双通道分离
2020/12/25 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
网上书店创业计划书
2014/01/12 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
民间借贷被告代理词
2015/05/23 职场文书
工程款催款函
2015/06/24 职场文书
律师催款函范文
2015/06/24 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android