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

 更新时间:2017年06月08日 09:58:06   作者:itakeo  
这篇文章主要给大家介绍了微信小程序开发之toast提示插件的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

前言

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

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

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

然后在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) 

点击这里下载文件

总结

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

相关文章

  • 为网站代码块pre标签增加一个复制代码按钮代码

    为网站代码块pre标签增加一个复制代码按钮代码

    写文章的时候,作为一名专业的码农,经常会在文章中粘贴一些代码。有的时候代码块比较长,在后期使用中需要复制这段代码就比较麻烦
    2021-11-11
  • 如何使用ES6的class类继承来实现绚丽小球效果

    如何使用ES6的class类继承来实现绚丽小球效果

    JS是由ES(ECMAScript)、DOM(浏览器文档对象)、BOM(浏览器对象模型)组成,这篇文章主要给大家介绍了关于如何使用ES6的class类继承来实现绚丽小球效果的相关资料,需要的朋友可以参考下
    2021-06-06
  • JS图片预加载插件详解

    JS图片预加载插件详解

    这篇文章主要为大家详细介绍了JS图片预加载插件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS基于构造函数实现的菜单滑动显隐效果【测试可用】

    JS基于构造函数实现的菜单滑动显隐效果【测试可用】

    这篇文章主要介绍了JS基于构造函数实现的菜单滑动显隐效果,可实现基本的菜单折叠与展开功能,涉及javascript响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下
    2016-06-06
  • js实现目录链接,内容跟着目录滚动显示的简单实例

    js实现目录链接,内容跟着目录滚动显示的简单实例

    下面小编就为大家带来一篇js实现目录链接,内容跟着目录滚动显示的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

    基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

    该价格表基于Bootstrap网格系统来进行布局,通过简单的CSS3代码来美化价格表,样式非常的时尚漂亮,且能在不同屏幕下展示良好的效果,需要的朋友可以参考下
    2017-02-02
  • 详解JavaScript之ES5的继承

    详解JavaScript之ES5的继承

    这篇文章主要介绍了JavaScript之ES5的继承的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • asp.net和asp下ACCESS的参数化查询

    asp.net和asp下ACCESS的参数化查询

    最近因项目需要用ACCESS做数据库开发WEB项目看论坛上还许多人问及ACCESS被注入的安全问题 许多人解决的方法仍然是用Replace替换特殊字符,然而这样做也并没有起到太大做用
    2008-06-06
  • 微信小程序传值常用的4种方式

    微信小程序传值常用的4种方式

    微信小程序开发中的大部分知识点和前端开发是一模一样的,这篇文章主要给大家介绍了关于微信小程序传值常用的4种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 详解JavaScript的数据类型以及数据类型的转换

    详解JavaScript的数据类型以及数据类型的转换

    这篇文章主要介绍了JavaScript的数据类型以及数据类型的转换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论