微信小程序自定义toast弹窗效果的实现代码

<template name="toast"> //name相当于模板的标识，引用的时候好判断引用哪一个
 <view class='toast-out' wx:if='{{isShow}}'>　　　　//wx：if是条件渲染，使用这个是为了好判断是否显示或隐藏toast
 <view class='toast-in'>　　　　　　
 <span class='iconfont {{iconClass}}'></span> //使用的阿里字体图标，根据传入的class值改变显示的图标
 <view class='toast-txt'>
  {{txt}}　　　　　　　　　　//需要显示的提醒内容
 </view>
 </view>
 </view>
</template>

.toast-out {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
 width: 100%;
 height: 100%;
 display: flex; //小程序中多使用flex布局，很方便的
 justify-content: center;　　
 align-items: center;
}
.toast-out .toast-in {
 min-width: 100px;
 background: rgba(0, 0, 0, 0.7);
 padding: 6px;
 text-align: center;
 color: white;
 border-radius: 8px;
}
.toast-out .toast-in span {
 font-size: 30px;
}
.toast-out .toast-in .toast-txt {
 font-size: 14px;
}

<import src="../../public/html/template.wxml" />

<template is="toast" data="{{txt,isShow,iconClass}}"></template>

toastShow:function(str,icon){
 var _this = this;
 _this.setData({
 isShow: true,
 txt: str,
 iconClass:icon
 });
 setTimeout(function () { //toast消失
 _this.setData({
 isShow: false
 });
 }, 1500); 
}

log_btn:function(){
 var name=this.data.userName;if(name==""){
 this.toastShow('登录名不能为空',"icon-suo");
 }
}

App({
 toastShow: function (that, str, icon){
 that.setData({
 isShow: true,
 txt: str,
 iconClass: icon
 });
 setTimeout(function () {
 that.setData({
 isShow: false
 });
 }, 1500);
 }, 
})

his_clear:function(){ 
 app.toastShow(this, "清除成功", "icon-correct"); 
},