import fmtEvent from '../_util/fmtEvent';
|
|
var noop = function noop() {};
|
|
var canIUseTransitionEnd = my.canIUse('view.onTransitionEnd');
|
Component({
|
props: {
|
className: '',
|
mode: '',
|
// closable,link
|
action: '',
|
// 文本按钮
|
actionLeft: '',
|
// 文本按钮
|
show: true,
|
// 是否显示
|
enableMarquee: false,
|
// 是否开启marquee
|
onClick: function onClick() {},
|
onClickLeft: function onClickLeft() {},
|
marqueeProps: {
|
loop: false,
|
leading: 500,
|
trailing: 800,
|
fps: 40
|
},
|
capsuleItem: [],
|
showIcon: true,
|
type: 'normal',
|
// 通告栏类型： normal/error/active
|
capsule: false,
|
// 是否为胶囊型通告栏
|
transparent: false
|
},
|
data: {
|
animatedWidth: 0,
|
overflowWidth: 0,
|
duration: 0,
|
marqueeStyle: '',
|
canIUseTransitionEnd: canIUseTransitionEnd,
|
showShadow: true
|
},
|
didMount: function didMount() {
|
if (this.props.enableMarquee) {
|
if (!canIUseTransitionEnd) {
|
this._measureText();
|
|
this._startAnimation();
|
} else {
|
this._measureText(this.startMarquee.bind(this));
|
}
|
}
|
|
if (this.props.type === 'active' && this.props.transparent) {
|
this.setData({
|
showShadow: false
|
});
|
} else {
|
this.setData({
|
showShadow: true
|
});
|
}
|
},
|
didUpdate: function didUpdate() {
|
if (this.props.type === 'active' && this.props.transparent && this.data.showShadow === true) {
|
this.setData({
|
showShadow: false
|
});
|
} else if (this.data.showShadow === false) {
|
this.setData({
|
showShadow: true
|
});
|
} // 这里更新处理的原因是防止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.data.marqueeStyle !== '') {
|
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') + ";";
|
|
if (this.data.marqueeStyle !== marqueeStyle) {
|
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; // 计算文本所占据的宽度，计算需要滚动的宽度
|
|
setTimeout(function () {
|
my.createSelectorQuery().select(".am-notice-marquee-" + _this2.$id).boundingClientRect().select(".am-notice-content-" + _this2.$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();
|
}
|
});
|
}, 0);
|
},
|
_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(e) {
|
var _this$props = this.props,
|
capsule = _this$props.capsule,
|
mode = _this$props.mode,
|
action = _this$props.action,
|
actionLeft = _this$props.actionLeft,
|
onClick = _this$props.onClick;
|
var event = fmtEvent(this.props, e);
|
|
if (capsule && typeof onClick === 'function' || mode === 'link' && actionLeft === '' && action === '' && typeof onClick === 'function') {
|
onClick(event);
|
}
|
},
|
onOperationTap: function onOperationTap(e) {
|
var _this$props2 = this.props,
|
mode = _this$props2.mode,
|
action = _this$props2.action,
|
onClick = _this$props2.onClick;
|
var event = fmtEvent(this.props, e);
|
|
if ((mode || action !== '') && typeof onClick === 'function') {
|
onClick(event);
|
}
|
},
|
onActionLeftTap: function onActionLeftTap(e) {
|
var _this$props3 = this.props,
|
actionLeft = _this$props3.actionLeft,
|
onClickLeft = _this$props3.onClickLeft;
|
var event = fmtEvent(this.props, e);
|
|
if (actionLeft !== '' && typeof onClickLeft === 'function') {
|
onClickLeft(event);
|
}
|
}
|
}
|
});
|
