微信小程序使用component自定义toast弹窗效果

{
 "component": true,  // 自定义组件声明
 "usingComponents": {}  // 可选项，用于引用别的组件
}

/* 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.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 () {

 }
})