VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动
华纳云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

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

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 微信开发的吐司提示插件实例
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!