Yao f67af0614a
[bugfix] NoticeBar: 修复动画播放异常的问题 (#155)
* 修复 NoticeBar 展示问题

* remove console.log
2018-03-23 10:33:44 +08:00

75 lines
2.3 KiB
JavaScript

const ZanNoticeBar = {
initZanNoticeBarScroll(componentId) {
this.zanNoticeBarNode = this.zanNoticeBarNode || {};
this.zanNoticeBarNode[`${componentId}`] = {
width: undefined,
wrapWidth: undefined,
animation: null,
resetAnimation: null
};
const currentComponent = this.zanNoticeBarNode[`${componentId}`];
wx.createSelectorQuery()
.in(this)
.select(`#${componentId}__content`)
.boundingClientRect((rect) => {
if (!rect || !rect.width) {
console.warn('页面缺少 noticebar 元素');
return;
}
currentComponent.width = rect.width;
wx
.createSelectorQuery()
.in(this)
.select(`#${componentId}__content-wrap`)
.boundingClientRect((rect) => {
if (!rect || !rect.width) {
return;
}
clearTimeout(this.data[componentId].setTimeoutId)
currentComponent.wrapWidth = rect.width;
if (currentComponent.wrapWidth < currentComponent.width) {
var mstime = currentComponent.width / 40 * 1000;
currentComponent.animation = wx.createAnimation({
duration: mstime,
timingFunction: 'linear'
});
currentComponent.resetAnimation = wx.createAnimation({
duration: 0,
timingFunction: 'linear'
});
this.scrollZanNoticeBar(componentId, mstime);
}
})
.exec();
})
.exec();
},
scrollZanNoticeBar(componentId, mstime) {
const currentComponent = this.zanNoticeBarNode[`${componentId}`];
const resetAnimationData = currentComponent.resetAnimation.translateX(currentComponent.wrapWidth).step();
this.setData({
[`${componentId}.animationData`]: resetAnimationData.export()
});
const aninationData = currentComponent.animation.translateX(-mstime * 40 / 1000).step();
setTimeout(() => {
this.setData({
[`${componentId}.animationData`]: aninationData.export()
});
}, 100);
const setTimeoutId = setTimeout(() => {
this.scrollZanNoticeBar(componentId, mstime);
}, mstime);
this.setData({
[`${componentId}.setTimeoutId`]: setTimeoutId
})
}
};
module.exports = ZanNoticeBar;