本文将教你如何实现一个自定义的toast提示框，实现后的基本效果图如下:

小程序中一个自定义组件由 json wxml wxss js 4个文件组成的。下面我们一步一步地来创建文件及完成其中的配置：

step1：创建自定义组件

首先创建一个components文件夹，用于放置所有自定义的组件，创建之后的目录结构为

其中的toastedit是我们本次要实现的toast提示框组件。

step2：基本配置

toastedit.json（进行自定义组件声明）

{
  "component": true
}

toastedit.wxml

<view class='wx_toast_container' hidden="{{!toastShow}}">
  <view class='wx_toast_text'>{{toastText}}</view>
</view>

toastedit.wxss

.wx_toast_container{
    position: fixed; 
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.wx_toast_text{
    background:rgba(0,0,0,0.95);
    color:white;
    text-align:center;
    font-size:34rpx;
    padding:34rpx 50rpx;
    border-radius:20rpx;
    max-width:70%;
    min-width:35%;
    box-sizing:border-box;
    line-height:120%;
}

toastedit.js

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    toastText: {            // 属性名
      type: String,
      value: '内容'
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    toastShow:false,
  },
  /**
   * 组件的方法列表
   */
  methods: {
    showToast(text,time) {
      this.setData({
        toastShow: !this.data.toastShow,
        toastText: text
      })

      var that = this

      if (!time){
        time = 8000
      }

      setTimeout(function(){
        that.setData({
          toastShow: !that.data.toastShow
        })
      }, time)
    }
  }
})

step3：使用组件

我们要在index.wxml中使用组件的话，首先要在index.json中进行声明

{
  "usingComponents": {
      "toastedit": "/components/toastedit/toastedit"
  }
}

<view>
    <toastedit id="toastedit">{{toastText}}</toastedit>     
    <button type="primary" bindtap="showToast"> showToast! </button>
</view>

最后index.js的配置如下

Page({
  onReady: function () {
    //获得toastedit组件
    this.toastedit = this.selectComponent("#toastedit")

  },
  showToast: function () {
    this.toastedit.showToast('我是传过来的toast内容',2000)
  }
})

完成上面这几步，一个简单的小程序自定义组件就完成了，使用时只需要执行（可自定义提示框显示的文本及显示的时长）

this.toastedit.showToast('哇塞！成功了~',2000)

运行结果如下：