主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
本文主要介绍用于微信小程序开发的吐司提示插件的相关信息。通过示例代码详细介绍,对大家有一定的参考和学习价值。下面就为有需要的朋友们一起来看看吧。
序
3月28日,微信更新了版本。showToast可以通过image参数修改默认图标,最大时间已取消。
以上两个更新实用得多,但图标仍然无法删除。显示形式有点单一,无法自定义,后续更新中可能会增加更多功能。让我们来看看这篇文章的详细内容:
下载文章下面的文件并将其放在根目录中。
然后将js引入App.js并将其添加到应用程序中,如下所示:
var wxToast = require(& amp;#39;toast/toast . js & amp;#39;)app({ wx ast,on launch:function(){ } })将以下css添加到app.wxss:
。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:translate 3d(-50%,0,0);填充:15px颜色:# ffffont -大小:17pxtext-align:居中;边框-半径:5px背景:rgba(0,0,0,。8)。wxToast _ img { width:55px;高度:55px显示:块;Margin:0 auto 8px auto}然后将以下内容添加到页面xxx.wxml:
& lt导入src = & quot../../toast/toast . wxml & quot;/& gt;& lt模板是= & quotwxToast & quotdata = & quot{{...wxToastConfig } } & quot& gt& lt/template & gt;最后,可以在页面xxx.js中调用它
var app = getApp();//wxToast挂载在app下,所以必须先获取app page({ toast:{//Call app . wxToast({ title:&;#39;正在加载&;#39;})})},onLoad:function(){ } })更多方法:
app . wx toast({ title:& amp;#39;验证码&中的错误;#39;,//标题,不要写IMG:&;#39;../../images/cc . png & amp;#39;,//图标路径,不要写或显示img类:&;#39;图片与广告。#39;,//icon添加类名内容类:&;#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);)点击此处下载文件。
这几篇文章你可能也喜欢:
本文由主机参考刊发,转载请注明:微信开发的吐司提醒插件示例(微信提醒插件) https://zhujicankao.com/107056.html
评论前必须登录!
注册