index.js
3.6 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
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var component_1 = require("../common/component");
var FONT_COLOR = '#ed6a0c';
var BG_COLOR = '#fffbe8';
component_1.VantComponent({
props: {
text: {
type: String,
value: ''
},
mode: {
type: String,
value: ''
},
url: {
type: String,
value: ''
},
openType: {
type: String,
value: 'navigate'
},
delay: {
type: Number,
value: 1
},
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
},
wrapable: Boolean
},
data: {
show: true
},
watch: {
text: function () {
this.set({}, this.init);
}
},
created: function () {
this.resetAnimation = wx.createAnimation({
duration: 0,
timingFunction: 'linear'
});
},
destroyed: function () {
this.timer && clearTimeout(this.timer);
},
methods: {
init: function () {
var _this = this;
Promise.all([
this.getRect('.van-notice-bar__content'),
this.getRect('.van-notice-bar__wrap')
]).then(function (rects) {
var contentRect = rects[0], wrapRect = rects[1];
if (contentRect == null ||
wrapRect == null ||
!contentRect.width ||
!wrapRect.width) {
return;
}
var _a = _this.data, speed = _a.speed, scrollable = _a.scrollable, delay = _a.delay;
if (scrollable && wrapRect.width < contentRect.width) {
var duration = (contentRect.width / speed) * 1000;
_this.wrapWidth = wrapRect.width;
_this.contentWidth = contentRect.width;
_this.duration = duration;
_this.animation = wx.createAnimation({
duration: duration,
timingFunction: 'linear',
delay: delay
});
_this.scroll();
}
});
},
scroll: function () {
var _this = this;
this.timer && clearTimeout(this.timer);
this.timer = null;
this.set({
animationData: this.resetAnimation
.translateX(this.wrapWidth)
.step()
.export()
});
setTimeout(function () {
_this.set({
animationData: _this.animation
.translateX(-_this.contentWidth)
.step()
.export()
});
}, 20);
this.timer = setTimeout(function () {
_this.scroll();
}, this.duration);
},
onClickIcon: function () {
this.timer && clearTimeout(this.timer);
this.timer = null;
this.set({ show: false });
},
onClick: function (event) {
this.$emit('click', event);
}
}
});