微信小程序自定义实现toast进度百分比动画组件

目录结构

在这里插入图片描述

wxml

<view class='wx-toast-box' style="z-index:{{level_box}}" animation="{{animationData}}">
  <view class='wx-toast-content'>
    <view class="progress">{{number}}</view>
    <view class="img_box">
      <image class="circle " src="../../../image/loading.png" style="width:92rpx;height:92rpx"></image>
    </view>
    <view class='wx-toast-toast anima_position'>{{ content }}</view>
  </view>
</view>
     搭建组件结构

复制代码

js

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持 
  },
  /** 
   * 私有数据,组件的初始数据 
   * 可用于模版渲染 
   */
  data: { // 弹窗显示控制 
    animationData: {},
    content: '提示内容',
    number: 0,
    level_box:-999,
  },
  /**
   * 组件的方法列表 
   */
  methods: {
    /** 
     * 显示toast，定义动画
     */
    numberChange() {
      let _this = this
      for (let i = 0; i < 101; i++) {
        (function () {
          setTimeout(() => {
            _this.setData({
              number: i + '%'
            })
          }, 100 * i)
        })()
      }
    },
    showToast(val) {
      this.setData({
        level_box:999
      })
      this.numberChange()
      var animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease',
      })
      this.animation = animation
      animation.opacity(1).step()
      this.setData({
        animationData: animation.export(),
        content: val
      })
      /**
       * 延时消失
       */
      setTimeout(function () {
        animation.opacity(0).step()
        this.setData({
          animationData: animation.export()
        })
      }.bind(this), 10000)
    }
  }
})
复制代码

json

```javascript
{
  "component": true,
  "usingComponents": {}
}
复制代码

wxss

可以根据具体项目背景进行修改

.wx-toast-box {
  display: flex;
  width: 100%;
  justify-content: center;
  position: fixed;
  top: 400rpx;
  opacity: 0;
}

.wx-toast-content {
  max-width: 80%;
  border-radius: 30rpx;
  padding: 30rpx;
  background: rgba(0, 0, 0, 0.6);
}

.wx-toast-toast {
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}

.progress {
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 700;
  text-align: CENTER;
  color: #07c160;
}

.img_box {
  display: flex;
  justify-content: center;
  margin: 20rpx 0;
}

@keyframes rotate {
  from {
    transform: rotate(360deg)
  }

  to {
    transform: rotate(0deg)
  }
}

.circle {
  animation: 3s linear 0s normal none infinite rotate;
}

@keyframes translateBox {
  0% {
    transform: translateX(0px)
  }

  50% {
    transform: translateX(10px)
  }
  100% {
    transform: translateX(0px)
  }
}

.anima_position {
  animation: 3s linear 0s normal none infinite translateBox;
}
复制代码