Anwendungsbeispiele für das von WeChat entwickelte Toast-Prompt-Plug-in

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zum Toast-Prompt-Plug-in für die WeChat-Miniprogrammentwicklung vor. Der Artikel stellt es ausführlich anhand von Beispielcode vor, der für alle Freunde, die es benötigen, einen gewissen Referenz- und Lernwert hat Schauen Sie sich unten um.

Vorwort

Am 28. März hat WeChat die Version aktualisiert, die das Standardsymbol über den Bildparameter und die maximale Zeit ändern kann ebenfalls abgesagt.

Die beiden oben genannten Updates sind sehr nützlich, aber das Symbol kann immer noch nicht entfernt werden. Die Anzeigeform ist etwas einfach und kann nicht angepasst werden. Weitere Funktionen können in späteren Updates hinzugefügt werden. Werfen wir einen Blick auf die Details dieses Artikels:

Laden Sie die Datei unter dem Artikel herunter und legen Sie sie im Stammverzeichnis ab.

Führen Sie dann js in app.js ein und fügen Sie es wie folgt zur App hinzu:

var wxToast = require('toast/toast.js')
App({
 wxToast ,
 onLaunch: function () {}
})

in Fügen Sie das folgende CSS zu app.wxss hinzu:

.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}

Fügen Sie dann den folgenden Inhalt zur Seite xxx.wxml hinzu:

<import src="../../toast/toast.wxml"/>
<template is="wxToast" data="{{...wxToastConfig}}"></template>

Schließlich kann es in Seite xxx.js aufgerufen werden.

var app = getApp(); //wxToast挂载在app下面，所以必须先获取app
Page({
 toast: {
 //调用
 app.wxToast({
  title : '加载中'
 })
 },
 onLoad : function( ){}
})

Weitere Methoden:

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)

Klicken Sie hier, um die Datei herunterzuladen

Das obige ist der detaillierte Inhalt vonAnwendungsbeispiele für das von WeChat entwickelte Toast-Prompt-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!