index.js
3.4 KB
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import { VantComponent } from '../common/component';
const FONT_COLOR = '#ed6a0c';
const BG_COLOR = '#fffbe8';
VantComponent({
props: {
text: {
type: String,
value: ''
},
mode: {
type: String,
value: ''
},
url: {
type: String,
value: ''
},
openType: {
type: String,
value: 'navigate'
},
delay: {
type: Number,
value: 0
},
speed: {
type: Number,
value: 50
},
scrollable: {
type: Boolean,
value: true
},
leftIcon: {
type: String,
value: ''
},
color: {
type: String,
value: FONT_COLOR
},
backgroundColor: {
type: String,
value: BG_COLOR
}
},
data: {
show: true,
hasRightIcon: false
},
watch: {
text() {
this.set({}, this.init);
}
},
created() {
if (this.data.mode) {
this.set({
hasRightIcon: true
});
}
this.resetAnimation = wx.createAnimation({
duration: 0,
timingFunction: 'linear'
});
},
destroyed() {
this.timer && clearTimeout(this.timer);
},
methods: {
init() {
Promise.all([
this.getRect('.van-notice-bar__content'),
this.getRect('.van-notice-bar__content-wrap')
]).then((rects) => {
const [contentRect, wrapRect] = rects;
if (contentRect == null ||
wrapRect == null ||
!contentRect.width ||
!wrapRect.width) {
return;
}
const { speed, scrollable, delay } = this.data;
if (scrollable && wrapRect.width < contentRect.width) {
const duration = (contentRect.width / speed) * 1000;
this.wrapWidth = wrapRect.width;
this.contentWidth = contentRect.width;
this.duration = duration;
this.animation = wx.createAnimation({
duration,
timingFunction: 'linear',
delay
});
this.scroll();
}
});
},
scroll() {
this.timer && clearTimeout(this.timer);
this.timer = null;
this.set({
animationData: this.resetAnimation
.translateX(this.wrapWidth)
.step()
.export()
});
setTimeout(() => {
this.set({
animationData: this.animation
.translateX(-this.contentWidth)
.step()
.export()
});
}, 20);
this.timer = setTimeout(() => {
this.scroll();
}, this.duration);
},
onClickIcon() {
this.timer && clearTimeout(this.timer);
this.timer = null;
this.set({ show: false });
},
onClick(event) {
this.$emit('click', event);
}
}
});