微信小程序自定义弹窗组件

业务背景：弹窗有时字体较多，超过7个字，不适用wx.showToast.

组件代码

<view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}">
  <view class="toast-content" >
    <view class="toast-img">
      <block wx:if="{{type==='success'}}">
        <image class="toast-icon" src="/images/correct.png" />
      </block>
      <block wx:if="{{type==='fail'}}">
        <image class="toast-icon" src="/images/warn.png" />
      </block>
    </view>
    <view class="toast-title">{{title}}</view>
    <view style="width:100%;border-top: 1rpx solid #ddd;"></view>
    <view bindtap="handleClose" style="width: 100%;text-align: center;color: #666;line-height: 80rpx;">
    确 定
    </view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* components/toast/toast.wxss */

.toast-box {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 11;
  display: none;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
 }
 .show{
  display: block;
 }
 .toast-content {
  position: absolute;
  left: 50%;
  top: 45%;
  width:600rpx;
  /*height: 250rpx;*/
  border-radius: 10rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%);
  background: white;
 }
 .toast-img{
   width: 100%;
   height: 100rpx;
   padding-top: 15rpx;
   box-sizing: bordre-box;
   text-align: center;
 }
 .toast-icon{
   width: 100rpx;
   height: 100rpx;
 }
 .toast-title {
   width: 100%;
   padding: 30rpx;
   line-height: 45rpx;
   color: #666;
   text-align: center;
   font-size: 28rpx;
   box-sizing: border-box;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// components/toast/toast.js

Component({
  properties: {
  },
  data: {
   type: 'fail',
   title: '',
   isShow: false,
   animationData: ''
  },
  methods: {
   showToast: function (data) {
    const that = this;
    if (this._showTimer) {
     clearTimeout(this._showTimer)
    }
    if (this._animationTimer) {
     clearTimeout(this._animationTimer)
    }
    // display需要先设置为block之后，才能执行动画
    this.setData({
     title: data.title,
     type: data.type,
     isShow: true,
    });
    this._animationTimer = setTimeout(() => {
     const animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
      delay: 0
     })
     animation.opacity(1).step();
     that.setData({
      animationData: animation.export(),
     })
    }, 50)
    this._showTimer = setTimeout(function () {
     that.hideToast();
     if (data.compelete && (typeof data.compelete === 'function')) {
      data.compelete()
     }
    }, data.duration)
   },
   handleClose(){
    this.hideToast();
   },
   hideToast: function () {
    if (this._hideTimer) {
     clearTimeout(this._hideTimer)
    }
    let animation = wx.createAnimation({
     duration: 200,
     timingFunction: 'ease',
     delay: 0
    })
    animation.opacity(0).step();
    this.setData({
     animationData: animation.export(),
    })
    this._hideTimer = setTimeout(() => {
     this.setData({
      isShow: false,
     })
    }, 0)
   }
  }
 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

引用部分

// json
 {
  "usingComponents": {
    "vas-toast": "../../components/toast/toast"
  }
}
// html
<vas-toast id='toast'></vas-toast>
js
  onShow: function () {
    this.prompt = this.selectComponent("#toast");
  },
that.prompt.showToast({
            type: 'fail',
            title: res.data.errmsg,
            duration: 4000,
            compelete: function () {}
          })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18