微信小程序开发之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 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
js实现验证码功能
Jul 24 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
vue2单元测试环境搭建
2018/05/24 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
Vue实现购物车实例代码两则
2020/05/30 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
python3.0 字典key排序
2008/12/24 Python
Python urlopen()函数 示例分享
2014/06/12 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
pyshp创建shp点文件的方法
2018/12/31 Python
python创造虚拟环境方法总结
2019/03/04 Python
python实现趣味图片字符化
2019/04/30 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
什么是抽象
2015/12/13 面试题
小学运动会入场式解说词
2014/02/18 职场文书
个人评语大全
2014/05/04 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
Python 全局空间和局部空间
2022/04/06 Python