index.js 6.17 KB
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(); } } } });