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

摘要:这篇文章主要介绍了微信小程序自定义toast组件的方法,结合实例形式详细分析了微信小程序自定义toast组件的步骤、实现方法及相关操作技巧,需要的朋友可以参考下 2019-05-12 22:02:47

本文实例讲述了微信小程序自定义toast组件的方法。分享给大家供大家参考,具体如下:

怎么创建就不说了,前面一篇有
微信小程序自定义prompt组件
直接上代码

wxml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- components/toast/toast.wxml -->
<viewclass="toast-box {{isShow? 'show':''}}"animation="{{animationData}}">
  <viewclass="toast-content">
    <viewclass="toast-img">
      <blockwx:if="{{type==='success'}}">
        <imageclass="toast-icon"src="xxx"/>
      </block>
      <blockwx:if="{{type==='fail'}}">
        <imageclass="toast-icon"src="xxx"/>
      </block>
    </view>
    <viewclass="toast-title">{{title}}</view>
  </view>
</view>

js


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
// components/toast/toast.js
Component({
 properties: {
 },
 data: {
  type:'fail',
  title:'你还没有勾选呢!',
  isShow:false,
  animationData:''
 },
 methods: {
  showToast:function(data) {
   const self =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();
    self.setData({
     animationData: animation.export(),
    })
   }, 50)
   this._showTimer = setTimeout(function() {
    self.hideToast();
    if(data.compelete && (typeofdata.compelete ==='function')) {
     data.compelete()
    }
   }, 1200 || (50 + data.duration))
  },
  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,
    })
   }, 250)
  }
 }
})

json


1
2
3
4
{
 "component":true,
 "usingComponents": {}
}

wxss


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.wxss */
.toast-box {
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 z-index:11;
 display:none;
 opacity:0;
}
.show{
 display:block;
}
.toast-content {
 position:absolute;
 left:50%;
 top:35%;
 width:350rpx;
 /*height: 250rpx;*/
 border-radius:10rpx;
 box-sizing: bordre-box;
 transform: translate(-50%,-50%);
 background: rgba(0,0,0, .7);
}
.toast-img{
  width:100%;
  height:120rpx;
  padding-top:15rpx;
  box-sizing: bordre-box;
  text-align:center;
}
.toast-icon{
  width:100rpx;
  height:100rpx;
}
.toast-title {
  width:100%;
  padding:10rpx;
  line-height:65rpx;
  color:white;
  text-align:center;
  font-size:40rpx;
  box-sizing: border-box;
}

使用

例如,在index.html中使用

在json中添加useComponents属性


1
2
3
"usingComponents": {
  "vas-prompt":"./components/toast/toast"
}

wxml


1
2
<vas-toastid='toast'></vas-toast>
<buttonbindtap="showToast">点击弹出toast</button>

js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//在onReady生命周期函数中,先获取prompt实例
onReady:function(){
  this.prompt =this.selectComponent("#toast");
},
showToast:function(){
  this.toast.showToast({
   type:'success',
   title:'测试弹出消息',
   duration: 1000,
   compelete:function() {
    console.log('toast框隐藏之后,会调用该函数')
    //例如:跳转页面wx.navigateTo({ url: 'xxx' });
   }
  })
},

效果

希望本文所述对大家微信小程序开发有所帮助。

上一篇:没有了

下一篇:微信小程序如何再次获取用户授权的方法

鄂ICP备13002501号-1