微信小程序toast公用模板

由于微信自带的toast提示满足不了业务需求，需要重新定义toast

1.wxml代码

<!--wxtoast.wxml-->

<template name="wxToast">
<view class="wxToast_mask {{block ? 'wxToast_show' : ''}}" bindtap="hideToastFn" animation="{{animate}}" >
<div class="wxToast_content {{contentClass}}">
<image wx:if="{{img}}" class="wxToast_img {{imgClass}}" src="{{img}}" mode="scaleToFill"></image>
<text class="wxToastTitle">{{title}}</text>
</div>
</view>
</template>

　　

2.css代码

.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:180px;
position:absolute;
left:50%;
top:40%;
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
}

 

3.js代码

wetoast.js

function wxToast(a) {
function _toast() {
var _page = getCurrentPages()
this.page = _page[_page.length - 1];
this.timer = null
if (a == undefined) a = {}
this.init(a);
};
_toast.prototype = {
init: function (a) {
this.page.hideToastFn = () => {
if (a.tapClose) {
this.hide(a, 1);
a.hide && a.hide();
};
};

if (!a) {
a = this.page.data.wxToastConfig;
this.hide(a, 1);
return
}
a.title = a.title ? a.title : '正在加载'
a.block = true;
this.page.setData({
wxToastConfig: a
});
a.show && a.show();
setTimeout(() => {
var Animation = wx.createAnimation();
Animation.opacity(1).step({
duration: 500,
timingFunction: 'ease'
});
a.animate = Animation.export()
this.page.setData({
wxToastConfig: a
});
}, 40);
this.timer = setTimeout(() => {
this.hide(a);
}, a.duration ? a.duration + 500 : 2000)
},
hide: function (a, b) {
if (!a.block) return
var Animation = wx.createAnimation();
Animation.opacity(0).step({
duration: 500,
timingFunction: 'ease'
});
a.animate = Animation.export()
this.page.setData({
wxToastConfig: a
});
setTimeout(() => {
a.block = false
this.page.setData({
wxToastConfig: a
});
if (!b) a.hide && a.hide();
}, 500);
clearTimeout(this.timer)
}
}
return new _toast();
}
module.exports = wxToast

　　

4.调用模板

1>先导入页面wxtoast.wxml中的模板到需要调用的页面，例如导入到up.wxml中

 

2>在对应的up.js中调用toast模板

step1:需要在app.js中引入wetoast.js并加入APP中

          let wxToast = require('page/wetoast/wetoast')

         App({

               wxToast,

                   data:{

                     }

            })

 

step2:在页面中调用

          var app = getApp()

       Page({

             onLoad:function(){       

                        app.wxToast({
                                title:'我是toast提示',
                                duration: 2000
                              })

                   }

        } )

 

更多方法：

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('消失啦')
 }
});

如需要隐藏，参数设置为false即可

app.wxToast(false); //如果需要隐藏，参数设置为false即可。
setTimeout(function(){
 app.wxToast(false);
},3000)