Thomas

【更新】2018-09-30

重写了组件，新增了一个样式，新增了一堆参数，原样式进行了部分调整，具体使用参照这里

下面那堆可以不用管了
demo目录
以下是示例图（无视那个熊猫）
加载中

成功

警告

自定义图片

我自定义组件放在了/components/toast文件夹下

toast.wxml部分

<view class="toast" wx:if="{{param.title || param.icon}}">
    <view class="toast-block">
        <image class="{{param.icon}}" src="{{param.image?param.image:(param.icon!='none'?'./icons/'+(param.icon||'success')+'.png':'')}}" bindload="onImageLoad" style="{{param.image?'width:'+width+';height:'+height+';':''}}"></image>
        <view class="title {{param.icon}}">{{param.title}}</view>
    </view>
</view>

toast.wxss部分

.toast {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.toast-block {
    max-width: 540rpx;
    min-width: 200rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10rpx;
}

.toast-block>image {
    width: 60rpx;
    height: 60rpx;
    max-width: 540rpx;
    max-height: 540rpx;
    display: block;
}

.toast-block>image.loading {
    animation:circle 1s infinite linear;
}
@keyframes circle{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}
.toast-block>image.none{
    display: none;
}
.toast-block .title {
    margin-top: 20rpx;
    line-height: 29rpx;
    font-size: 30rpx;
    color: #fff;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.toast-block .none{
    margin-top: 0;
}

toast.js部分

Component({
    properties: {
        param:{
            type: Object,
            value: { icon: "", image: "", title: "", duration:1000 },
            observer: function (newVal, oldVal) {
                if (!this.isPlainObject(newVal)){
                    let pages = getCurrentPages();
                    let page = pages[pages.length - 1];
                    var duration = typeof newVal == 'object' ? newVal.duration : 1000;
                    setTimeout(() => {
                        page.setData({
                            toast: {}
                        })
                    }, duration);
                }
            }
        }
    },
    data: {},
    methods: {
        isPlainObject: function(obj){
            for (var name in obj) {
                return false;
            }
            return true;
        },
        onImageLoad:function(e){
            this.setData({
                width: e.detail.width * 2 > 540 ? 540:e.detail.width * 2 + 'rpx',
                height: e.detail.height * 2 > 540 ? 540:e.detail.height * 2 + 'rpx'
            })
        }
    }
})

以上是自定义组件的内容，里面包含了三张图片，懒得发，自己画一个就行，三个文件名字分别是success,warning,loading，格式为png。

icon图片大小固定为60rpx*60rpx。

image图片会自动判断大小，限制最大尺寸为540rpx*540rpx；

说说用法，

在app.js里插入

/**
 * toast模态弹窗
 * param.icon       string      弹框类型 success成功,warning警告,loading加载,none无图标,默认success
 * param.image      string      自定义图标
 * param.title      string      弹框内容
 * param.duration   int         弹窗显示时间，单位：毫秒，默认1秒
 */
showToast:function(param){
    let pages = getCurrentPages();
    let page = pages[pages.length - 1];
    page.setData({
        toast:param
    })
},

在需要使用的页面的json里加入

"usingComponents": {
    "toast": "/components/toast/toast"
}

然后在对应页面wxml最底部或最顶部加入

<toast param="{{toast}}"></toast>

然后对应页面的js中需要弹窗提示信息的地方加上

 app.showToast({
    title:'测试',
    duration:2000
 });

完。