微信小程序开发之toast提示插件使用示例


Posted in Javascript onJune 08, 2017

前言

3月28号微信更新了版本,showToast可以通过image参数修改默认icon了,最大时间也取消了。

以上两个更新实用很多,但icon还是无法去除。显示形式有点单一,无法自定义,可能后续更新会增加更多功能。下面来看看本文的详细内容:

微信小程序开发之toast提示插件使用示例

微信小程序开发之toast提示插件使用示例

下载文章下面的文件,放在根目录。

微信小程序开发之toast提示插件使用示例

然后在app.js中引入js并添加到App中,如下:

var wxToast = require('toast/toast.js')
App({
 wxToast ,
 onLaunch: function () {}
})

在app.wxss中添加如下css:

.wxToast_mask{width:100%;height:100%;position:fixed;left:0px;top:0px;z-index:10000;background:rgba(0,0,0,0);opacity:0;display:none}.wxToast_show{display:block}.wxToast_content{max-width:80%;min-width:90px;position:absolute;left:50%;top:20%;transform:translate3d(-50%,0,0);padding:15px;color:#fff;font-size:17px;text-align:center;border-radius:5px;background:rgba(0,0,0,.8)}.wxToast_img{width:55px;height:55px;display:block;margin:0 auto 8px auto}

接着在页面xxx.wxml中添加如下内容:

<import src="../../toast/toast.wxml"/>
<template is="wxToast" data="{{...wxToastConfig}}"></template>

最后在页面xxx.js中就可以调用了。

var app = getApp(); //wxToast挂载在app下面,所以必须先获取app
Page({
 toast: {
 //调用
 app.wxToast({
  title : '加载中'
 })
 },
 onLoad : function( ){}
})

更多方法:

app.wxToast({
 title : '验证码错误', //标题,不写默认正在加载
 img : '../../images/cc.png', //icon路径,不写不显示
 imgClass : 'images', //icon添加class类名
 contentClass : 'content', //内容添加class类名
 duration : 3000, //延时关闭,默认2000
 tapClose : false, //点击关闭,默认false
 show : function(){ //显示函数
 console.log('显示啦')
 },
 hide : function(){ //关闭函数
 console.log('消失啦')
 }
});
app.wxToast(false); //如果需要隐藏,参数设置为false即可。
setTimeout(function(){
 app.wxToast(false);
},3000)

总结

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

Javascript 相关文章推荐
jQuery 自定义函数写法分享
Mar 30 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
原生JS发送异步数据请求
Jun 08 #Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 #Javascript
vue.js中过滤器的使用教程
Jun 08 #Javascript
了解VUE的render函数的使用
Jun 08 #Javascript
Node.js 使用命令行工具检查更新
Jun 08 #Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 #Javascript
You might like
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
js异步加载的三种解决方案
2013/03/04 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
vue.js的安装方法
2017/05/12 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
简析Python的闭包和装饰器
2016/02/26 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python和opencv实现抠图
2018/07/18 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
劳动工资科岗位职责范本
2014/03/02 职场文书
表彰会主持词
2014/03/26 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
MySQL事务的隔离级别详情
2022/07/15 MySQL