-
Notifications
You must be signed in to change notification settings - Fork 1
/
toptip.wpy
69 lines (57 loc) · 1.43 KB
/
toptip.wpy
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
67
68
69
<template>
<view
wx:if="{{show}}"
animation="{{animationData}}"
class="weui-toptips weui-toptips_{{type === 'error' ? 'warn' : 'success'}}">
{{text}}
</view>
</template>
<script>
import wepy from 'wepy';
export default class Toptip extends wepy.component {
data = {
type: 'error',
duration: 2000,
animateDuration: 300,
animationData: '',
text: '',
show: false
};
methods = {
/**
* @param data: type, duration, text(required)
*/
show(data = {}) {
// show
Object.assign(this, data, { show: true });
this.$apply();
// slide down toptip
let animation = wx.createAnimation({
duration: this.animateDuration,
timingFunction: 'ease-in'
});
animation.translateY(0).step();
this.animationData = animation.export();
this.$apply();
// duration 之后消失
setTimeout(() => {
this.hide();
}, this.duration);
}
};
hide() {
let animation = wx.createAnimation({
duration: this.animateDuration,
timingFunction: 'ease-out'
});
animation.translateY('-100%').step();
this.animationData = animation.export();
this.$apply();
// animate end, remove element
setTimeout(() => {
this.show = false;
this.$apply();
}, this.animateDuration + 50);
}
}
</script>