微信小程序使用component自定義toast彈窗效果

{
 "component": true, // 自定義組件聲明
 "usingComponents": {} // 可選項，用于引用別的組件
}

<!--components/Toast/toast.wxml-->
<view class='mask' hidden="{{isShow}}">
 <image class="image" src='../../images/{{icon}}.png' mode='aspectFit'></image>
 <view class='info'>{{information}}</view>
</view>

/* components/Toast/toast.wxss */
.mask{
 width: 400rpx;
 height: 300rpx;
 border-radius:10rpx; 
 position: fixed;
 z-index: 1000;
 top: 300rpx;
 left: 175rpx;
 background: rgba(0, 0, 0, 0.6);
}
.image{
 z-index: 1000;
 width: 120rpx;
 height: 120rpx;
 margin-left: 140rpx;
}
.info{
 margin-top:50rpx; 
 z-index: 1000;
 text-align: center;
 color: #ffffff;
}
 width: 400rpx;
 height: 300rpx;
 border-radius:10rpx; 
 position: fixed;
 z-index: 1000;
 top: 300rpx;
 left: 175rpx;
 background: rgba(0, 0, 0, 0.6);
}
.image{
 z-index: 1000;
 width: 120rpx;
 height: 120rpx;
 margin-left:80rpx;
}
.info{
 margin-top:50rpx; 
 z-index: 1000;
 text-align: center;
 color: #ffffff;
}

// components/Toast/toast.js
Component({
 /**
 * 組件的屬性列表
 */
 properties: { //定義組件屬性
 information:{ //用來顯示提示信息
 type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
 value: '提示信息' // 屬性初始值（可選），如果未指定則會根據類型選擇一個
 },
 icon:{ //圖標類型，我在images文件夾中存放了success和fail的兩個圖標
 type:String,
 value:'success'
 },
 showTime:{ //彈窗開始顯示的時間單位ms
 type: Number,
 value:1000
 },
 hideTime: { //彈窗開始隱藏的時間單位ms
 type: Number,
 value: 1000
 }
 },
 /**
 * 組件的初始數據
 */
 data: {
 isShow:true
 },
 /**
 * 組件的方法列表
 */
 methods:{ 
 showToast:function () {
 let that = this;
 setTimeout(function () { 
 that.setData({
 isShow: !that.data.isShow
 });
 }, that.data.showTime);
 },
 hideToast: function (e) {
 let that = this;
 setTimeout(function(){ 
 that.setData({
 isShow: !that.data.isShow
 });
 },that.data.hideTime);
 }
 }
})

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

<!--page/index/index.wxml-->
<view class="container">
 <toast id='toast'information="提交成功，我們會盡快和您聯系" icon="success" showTime="1000" hideTime='2000'></toast>
 <button type="primary" bindtap="show"> 顯示彈窗 </button>
</view>

// page/index/index.js
Page({
 /**
 * 頁面的初始數據
 */
 data: {

 },
 show:function(){
 this.toast.showToast();
 this.toast.hideToast();
 },
 /**
 * 生命周期函數--監聽頁面加載
 */
 onLoad: function (options) {

 },
 /**
 * 生命周期函數--監聽頁面初次渲染完成
 */
 onReady: function () {
 this.toast = this.selectComponent("#toast");
 },
 /**
 * 生命周期函數--監聽頁面顯示
 */
 onShow: function () {

 },
 /**
 * 生命周期函數--監聽頁面隱藏
 */
 onHide: function () {

 },
 /**
 * 生命周期函數--監聽頁面卸載
 */
 onUnload: function () {

 },
 /**
 * 頁面相關事件處理函數--監聽用戶下拉動作
 */
 onPullDownRefresh: function () {

 },
 /**
 * 頁面上拉觸底事件的處理函數
 */
 onReachBottom: function () {

 },
 /**
 * 用戶點擊右上角分享
 */
 onShareAppMessage: function () {

 }
})