113 lines
3.1 KiB
Java
113 lines
3.1 KiB
Java
|
const VALID_MODE = ['closeable'];
|
||
|
|
const FONT_COLOR = '#f60';
|
||
|
|
const BG_COLOR = '#fff7cc';
|
||
|
|
|
||
|
|
Component({
|
||
|
|
externalClasses: ['i-class'],
|
||
|
|
|
||
|
|
properties: {
|
||
|
|
closable: {
|
||
|
|
type: Boolean,
|
||
|
|
value: false
|
||
|
|
},
|
||
|
|
icon: {
|
||
|
|
type: String,
|
||
|
|
value: ''
|
||
|
|
},
|
||
|
|
loop: {
|
||
|
|
type: Boolean,
|
||
|
|
value: false
|
||
|
|
},
|
||
|
|
// 背景颜色
|
||
|
|
backgroundcolor: {
|
||
|
|
type: String,
|
||
|
|
value: '#fefcec'
|
||
|
|
},
|
||
|
|
// 字体及图标颜色
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
value: '#f76a24'
|
||
|
|
},
|
||
|
|
// 滚动速度
|
||
|
|
speed: {
|
||
|
|
type: Number,
|
||
|
|
value: 1000
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data: {
|
||
|
|
show: true,
|
||
|
|
wrapWidth: 0,
|
||
|
|
width: 0,
|
||
|
|
duration: 0,
|
||
|
|
animation: null,
|
||
|
|
timer: null,
|
||
|
|
},
|
||
|
|
detached() {
|
||
|
|
this.destroyTimer();
|
||
|
|
},
|
||
|
|
ready() {
|
||
|
|
if (this.data.loop) {
|
||
|
|
this.initAnimation();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
initAnimation() {
|
||
|
|
wx.createSelectorQuery().in(this).select('.i-noticebar-content-wrap').boundingClientRect((wrapRect) => {
|
||
|
|
wx.createSelectorQuery().in(this).select('.i-noticebar-content').boundingClientRect((rect) => {
|
||
|
|
const duration = rect.width / 40 * this.data.speed;
|
||
|
|
const animation = wx.createAnimation({
|
||
|
|
duration: duration,
|
||
|
|
timingFunction: "linear",
|
||
|
|
});
|
||
|
|
this.setData({
|
||
|
|
wrapWidth: wrapRect.width,
|
||
|
|
width: rect.width,
|
||
|
|
duration: duration,
|
||
|
|
animation: animation
|
||
|
|
}, () => {
|
||
|
|
this.startAnimation();
|
||
|
|
});
|
||
|
|
}).exec();
|
||
|
|
|
||
|
|
}).exec();
|
||
|
|
},
|
||
|
|
startAnimation() {
|
||
|
|
//reset
|
||
|
|
if (this.data.animation.option.transition.duration !== 0) {
|
||
|
|
this.data.animation.option.transition.duration = 0;
|
||
|
|
const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step();
|
||
|
|
this.setData({
|
||
|
|
animationData: resetAnimation.export()
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.data.animation.option.transition.duration = this.data.duration;
|
||
|
|
const animationData = this.data.animation.translateX(-this.data.width).step();
|
||
|
|
setTimeout(() => {
|
||
|
|
this.setData({
|
||
|
|
animationData: animationData.export()
|
||
|
|
});
|
||
|
|
}, 100);
|
||
|
|
const timer = setTimeout(() => {
|
||
|
|
this.startAnimation();
|
||
|
|
}, this.data.duration);
|
||
|
|
this.setData({
|
||
|
|
timer,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
destroyTimer() {
|
||
|
|
if (this.data.timer) {
|
||
|
|
clearTimeout(this.data.timer);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleClose() {
|
||
|
|
this.destroyTimer();
|
||
|
|
this.setData({
|
||
|
|
show: false,
|
||
|
|
timer: null
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|