微信小程序自定义toast组件的方法详解【含动画】

我来为你详细讲解“微信小程序自定义toast组件的方法详解【含动画】”的攻略。

什么是Toast组件

Toast组件是一种提示框，通常用于向用户展示一些简短的信息或提示。在微信小程序中，Toast组件比较常见，通过它可以向用户提示请求数据的进度，或者一些操作的结果信息。

开始制作自定义Toast组件

1. 创建承载Toast的组件

在 WeUI 中，Toast组件是在基础组件之上的，因此你需要先在基础组件里新建一个名为toast的组件。

<template name="toast">
  <view class="weui-toast">
    <block wx:if="{{type!='text'}}">
        <view class="weui-mask"></view>
    </block>
    <view class="weui-toast__content">
        <block wx:if="{{type!='loading'}}">
        {{content}}
        </block>
        <block wx:if="{{type=='loading'}}">
          <image src="https://weui.io/images/loading.svg" class="weui-toast__loading" />
          <view class="weui-toast__loading-box"></view>
          <view class="weui-toast__loading-text">{{content}}</view>
        </block>
    </view>
  </view>
</template>

2. 定义组件样式

我们需要为toast组件添加样式。这里我们定义了两种样式，一种为text，一种为loading。

// toast样式
.weui-toast {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 5000;

  &__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 400;

    &--text {
      padding: 15px 20px;
      background-color: rgba(0,0,0,.5);
      border-radius: 5px;
      box-shadow: 0 10px 30px rgba(0,0,0,.2);
    }

    &--loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .weui-toast__loading {
        width: 50px;
        height: 50px;
        animation: rotate 1s linear infinite;

        @keyframes rotate {
          from { transform: rotate(0deg); }
          to   { transform: rotate(360deg); }
        }
      }
      .weui-toast__loading-box {
        margin-top: 10px;
        width: 100%;
        height: 1px;
        background-color: rgba(255, 255, 255, .2);
        position: relative;
        &:before,
        &:after {
          position: absolute;
          content: '';
          top: 0;
          left: 50%;
          width: 10px;
          height: 10px;
          margin-left: -5px;
          border-radius: 100%;
          background-color: #fff;
          animation: pulse 1s linear infinite;
        }
        &:before {
          margin-left:-15px;
          animation-delay:.5s;
        }
        &:after {
          margin-left:5px;
          animation-delay:.8s;
        }
      }
      .weui-toast__loading-text {
        font-size: 16px;
        line-height: 32px;
        margin-top: 10px;
      }
    }
  }

  &__mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    z-index: 5001;
  }
}

3. 定义组件属性与方法

我们需要在toast组件中定义属性和方法。其中，type是toast类型，content是toast显示的内容，duration是toast显示的时间。

Component({
  properties: {
    type: {
      type: String,
      value: 'text'
    },
    content: {
      type: String,
      value: ''
    },
    duration: {
      type: Number,
      value: 2000
    }
  },
  methods: {
    show: function () {
      this.setData({
        show: true
      });
      setTimeout(() => {
        this.hide();
      }, this.data.duration);
    },
    hide: function () {
      this.setData({
        show: false
      });
    }
  }
})

至此，一个简单的自定义toast组件就已完成。接下来我们可以在项目中使用这个组件了。

4. 在页面中使用自定义Toast组件

下面是在页面中使用toast的示例。在这个例子中，我们创建了两个toast组件，一个是text类型，另一个是loading类型。

<toast id="textToast" duration="2000" content="这是一个text toats" type="text"></toast>
<toast id="loadingToast" duration="3000" content="这是一个loading toats" type="loading" ref="loadingToast"></toast>

在JavaScript代码中，我们可以通过调用toast的show()或hide()方法来显示或隐藏toast组件。

Page({
  showToast: function(e) {
    var id = e.currentTarget.id;
    if (id === 'textToast') {
      this.selectComponent('#textToast').show();
    } else if ( id === 'loadingToast') {
      this.selectComponent('#loadingToast').show();
    }
  },
  hideToast: function () {
    this.selectComponent('#loadingToast').hide();
  }
})

在showToast方法中，我们通过selectComponent方法获取到了toast组件，并且调用show()方法来显示toast组件。在hideToast方法中，我们调用了toast组件的hide()方法来隐藏组件。

通过以上步骤，自定义toast组件已经完成了。在应用中，我们通过调用show()和hide()方法来控制toast的显示和隐藏。