var noop = function noop() {};
var canIUseTransitionEnd = my.canIUse('view.onTransitionEnd');
Component({
props: {
className: '',
mode: '',
// closable,link
action: '',
// 文本按钮
show: true,
// 是否显示
enableMarquee: false,
// 是否开启marquee
onClick: function onClick() {},
marqueeProps: {
loop: false,
leading: 500,
trailing: 800,
fps: 40
}
},
data: {
animatedWidth: 0,
overflowWidth: 0,
duration: 0,
marqueeStyle: '',
canIUseTransitionEnd: canIUseTransitionEnd
},
didMount: function didMount() {
if (this.props.enableMarquee) {
if (!canIUseTransitionEnd) {
this._measureText();
this._startAnimation();
} else {
this._measureText(this.startMarquee.bind(this));
}
}
},
didUpdate: function didUpdate() {
// 这里更新处理的原因是防止notice内容在动画过程中发生改变。
if (!canIUseTransitionEnd) {
this._measureText();
}
if (this.props.enableMarquee && !this._marqueeTimer && !canIUseTransitionEnd) {
this._measureText();
this._startAnimation();
} else {
// 当通过脚本切换 show 的值时(true or false),导致跑马灯动画效果失效的 bug 处理
if (!this.props.show) {
this.setData({
marqueeStyle: ''
});
}
this._measureText(this.startMarquee.bind(this));
}
},
didUnmount: function didUnmount() {
if (this._marqueeTimer) {
clearTimeout(this._marqueeTimer);
this._marqueeTimer = null;
}
},
methods: {
resetMarquee: function resetMarquee() {
var marqueeStyle = 'transform: translateX(0px); transition: 0s all linear;';
this.setData({
marqueeStyle: marqueeStyle
});
},
startMarquee: function startMarquee() {
var _this$props$marqueePr = this.props.marqueeProps.leading,
leading = _this$props$marqueePr === void 0 ? 500 : _this$props$marqueePr;
var _this$data = this.data,
duration = _this$data.duration,
overflowWidth = _this$data.overflowWidth;
var marqueeStyle = "transform: translateX(" + -overflowWidth + "px); transition: " + duration + "s all linear " + (typeof leading === 'number' ? leading / 1000 + "s" : '0s') + ";";
this.setData({
marqueeStyle: marqueeStyle
});
},
onTransitionEnd: function onTransitionEnd() {
var _this = this;
var _this$props$marqueePr2 = this.props.marqueeProps,
_this$props$marqueePr3 = _this$props$marqueePr2.loop,
loop = _this$props$marqueePr3 === void 0 ? false : _this$props$marqueePr3,
_this$props$marqueePr4 = _this$props$marqueePr2.trailing,
trailing = _this$props$marqueePr4 === void 0 ? 800 : _this$props$marqueePr4;
if (loop) {
setTimeout(function () {
_this.resetMarquee();
_this._measureText(_this.startMarquee.bind(_this));
}, typeof trailing === 'number' ? trailing : 0);
}
},
_measureText: function _measureText(callback) {
var _this2 = this;
if (callback === void 0) {
callback = noop;
}
var _this$props$marqueePr5 = this.props.marqueeProps.fps,
fps = _this$props$marqueePr5 === void 0 ? 40 : _this$props$marqueePr5; // 计算文本所占据的宽度,计算需要滚动的宽度
my.createSelectorQuery().select(".am-notice-marquee-" + this.$id).boundingClientRect().select(".am-notice-content-" + this.$id).boundingClientRect().exec(function (ret) {
var overflowWidth = ret && ret[0] && ret[1] && ret[0].width - ret[1].width || 0;
if (overflowWidth > 0) {
_this2.setData({
overflowWidth: overflowWidth,
duration: overflowWidth / fps
});
callback();
}
});
},
_startAnimation: function _startAnimation() {
var _this3 = this;
if (this._marqueeTimer) {
clearTimeout(this._marqueeTimer);
}
var _this$props$marqueePr6 = this.props.marqueeProps,
_this$props$marqueePr7 = _this$props$marqueePr6.loop,
loop = _this$props$marqueePr7 === void 0 ? false : _this$props$marqueePr7,
_this$props$marqueePr8 = _this$props$marqueePr6.leading,
leading = _this$props$marqueePr8 === void 0 ? 500 : _this$props$marqueePr8,
_this$props$marqueePr9 = _this$props$marqueePr6.trailing,
trailing = _this$props$marqueePr9 === void 0 ? 800 : _this$props$marqueePr9,
_this$props$marqueePr10 = _this$props$marqueePr6.fps,
fps = _this$props$marqueePr10 === void 0 ? 40 : _this$props$marqueePr10;
var TIMEOUT = 1 / fps * 1000;
var isLeading = this.data.animatedWidth === 0;
var timeout = isLeading ? leading : TIMEOUT;
var animate = function animate() {
var overflowWidth = _this3.data.overflowWidth;
var animatedWidth = _this3.data.animatedWidth + 1;
var isRoundOver = animatedWidth > overflowWidth;
if (isRoundOver) {
if (loop) {
animatedWidth = 0;
} else {
return;
}
}
if (isRoundOver && trailing) {
_this3._marqueeTimer = setTimeout(function () {
_this3.setData({
animatedWidth: animatedWidth
});
_this3._marqueeTimer = setTimeout(animate, TIMEOUT);
}, trailing);
} else {
_this3.setData({
animatedWidth: animatedWidth
});
_this3._marqueeTimer = setTimeout(animate, TIMEOUT);
}
};
if (this.data.overflowWidth !== 0) {
this._marqueeTimer = setTimeout(animate, timeout);
}
},
onNoticeTap: function onNoticeTap() {
var _this$props = this.props,
mode = _this$props.mode,
onClick = _this$props.onClick;
if (mode === 'link' && typeof onClick === 'function') {
onClick();
}
},
onOperationTap: function onOperationTap() {
var _this$props2 = this.props,
mode = _this$props2.mode,
onClick = _this$props2.onClick;
if (mode === 'closable' && typeof onClick === 'function') {
onClick();
}
}
}
});