微信开发的吐司提示插件实例

本文主要介绍用于微信小程序开发的吐司提示插件的相关信息。通过示例代码非常详细，对大家有一定的参考价值。有需要的朋友来看看吧。

序

3月28日，微信更新了版本。showToast可以通过image参数修改默认图标，最大时间已经取消。

以上两个更新很实用，但是图标不能移除。展示形式有点单一，无法定制。也许后续的更新会增加更多的功能。让我们来看看这篇文章的细节:

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

然后将js引入App.js，添加到App中，如下图:

var wxToast = require( # 39；toast/toast . js # 39；)app({ wx ast，onlaunch: function () {}})在app.wxss中添加以下css:

。wxToast _ mask { width:100%；身高:100%；位置:固定；左:0pxtop:0px；z-指数:10000；背景:rgba(0，0，0，0)；不透明度:0；显示:无}。wxToast_show{display:block}。wxToast _ content { max -width:80%；min -宽度:90px位置:绝对；左:50%；top:20%；transform:translate3d(-50%，0，0)；填充:15px颜色:# ffffont -大小:17pxtext-align:居中；border -半径:5px背景:rgba(0，0，0，.. 8)}。wxToast _ img { width:55px；高度:55px显示:块；Margin:0 auto 8px auto}然后在页面xxx.wxml中添加以下内容:

lt导入src = ../../toast/toast . wxml ；/ gt； lt模板是= wxToast data = {{...wxToastConfig } } gt lt/template gt；可以在最后一页xxx.js中调用

var app = getApp()；//wxToast挂载在app下，所以必须先获取app page({ toast:{//调用app . wxToast({ title: # 39；加载 # 39；}} }) }，onLoad: function( ){}}})更多方法:

app . wx toast({ title: # 39；验证码错误 # 39；，//标题，不写IMG默认正在加载: # 39；../../images/cc . png # 39；，//图标路径，不写也不显示img class: # 39；图片 # 39；，//icon添加类名content class: # 39；内容 # 39；，//在内容中添加类名duration: 3000，//延迟关闭，默认2000 tapClose: false，//点击关闭，默认false show: function(){ //显示函数console . log( # 39；秀 # 39；} }，hide: function(){ //关闭函数console . log( # 39；走了 # 39；) }});

app . wx toast(false)；//如果需要隐藏，只需将参数设置为false即可。setTimeout(function(){ app . wx toast(false))；}，3000)点击这里下载文件。以上是微信开发的吐司提示插件的应用实例详情。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 微信开发的吐司提醒插件示例（微信提醒插件）

本文由主机参考刊发，转载请注明：微信开发的吐司提示插件实例 https://zhujicankao.com/81841.html