xzs-mysql/source/wx/xzs-student/component/iView/notice-bar/index.js
2020-07-16 14:12:31 +08:00

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
});
}
}
});