微信小程序自定义弹窗，Loading

页面引用

<button type='button' bindtap='click'>点击</button>
<import src='../../template/template.wxml'/>
<template is='toast' data='{{...toast}}'></template>
<template is='loading' data='{{...loading}}'></template>

调用

// pages/animate/animate.js
import api from '../../utils/util.js';
Page({

    /**
     * 页面的初始数据
     */
    data: {
        toast: {
            flag: '',
            msg: '',
            show: true
        },
        loading: {
            msg: '',
            show: true
        }
    },
    click: function() {
        var that = this;
        // api.Toast(1, '提交成功', that, 20000);
        // api.Toast(2, '提交失败', that, 20000);
        api.Loading('提交失败', that);
        setTimeout(()=>{
            api.Close(that);
        },5000);
    }
})

template.wxml

<template name='toast'>
    <cover-view class="Toast" hidden="{{show}}">
        <cover-view class='ToastBg'></cover-view>
        <cover-view class='mask' wx:if='{{flag==1}}'>
            <cover-view class='icon'>
                <cover-image src='../../img/success.png' class='image'></cover-image>
            </cover-view>
            <cover-view class='msg'>{{msg}}</cover-view>
        </cover-view>

        <cover-view class='mask' wx:elif='{{flag==2}}'>
            <cover-view class='icon'>
                <cover-image src='../../img/fail.png' class='image'></cover-image>
            </cover-view>
            <cover-view class='msg'>{{msg}}</cover-view>
        </cover-view>
    </cover-view>
</template>
<template name='loading'>
    <cover-view class="Toast" hidden="{{show}}">
        <cover-view class='ToastBg'></cover-view>
        <cover-view class='mask'>
            <cover-view class='icon'>
                <cover-view class='loading_icon'></cover-view>
            </cover-view>
            <cover-view class='msg'>{{msg}}</cover-view>
        </cover-view>
    </cover-view>
</template>

utils.js

var app = getApp();
var baseUrl = getApp().baseUrl;
//开启toast
// flag（1表示成功，2表示失败，msg表示自定义提示信息,time提示显示时长);
var Toast = (flag, msg, that, time) => {
    that.data.toast.flag = flag;
    that.data.toast.msg = msg;
    that.data.toast.show = false;
    that.setData({
        toast: that.data.toast,
    })
    if(time){
        setTimeout(function () {
            that.data.toast.show = true;
            that.setData({
                toast: that.data.toast,
            }) //1.5秒之后弹窗隐藏
        }, time)
    }
}
//开启loading
var Loading = (msg, that) => {
    that.data.loading.msg = msg;
    that.data.loading.show = false;
    that.setData({
        loading: that.data.loading,
    })
}
//关闭loading
var Close = (that)=>{
    that.data.loading.msg = '';
    that.data.loading.show = true;
    that.setData({
        loading: that.data.loading,
    })
}
module.exports = {
    Toast: Toast,
    Loading: Loading,
    Close: Close
}

弹窗wxss

.Toast {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    /* background: rgba(255,255,255,1); */
    z-index: 99999;
}

.Toast .mask {
    padding: 20rpx 30rpx;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    border-radius: 6rpx;
    box-sizing: border-box;
    max-width: 70%;
    z-index: 2;
}

.Toast .mask .icon {
    margin-right: 20rpx;
}

.Toast .mask .icon .image {
    width: 60rpx;
    height: 60rpx;
}

.Toast .mask  .msg {
    flex: 1;
    color: #fff;
    line-height: 40rpx;
    font-size: 28rpx;
    white-space: pre-wrap;
}

.ToastBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

.loading_icon{
    -webkit-animation: loading 1s steps(12, end) infinite;
    animation: loading 1s steps(12, end) infinite;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
    background-size: 100%;
    width: 80rpx;
    height: 80rpx;
}