140 lines
5.4 KiB
JavaScript
140 lines
5.4 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
var props_1 = require("./props");
|
|
var console_1 = require("../_util/console");
|
|
Component({
|
|
props: props_1.NoticeBarDefaultProps,
|
|
data: {
|
|
show: true,
|
|
marqueeStyle: '',
|
|
animatedWidth: 0,
|
|
overflowWidth: 0,
|
|
duration: 0,
|
|
viewWidth: 0,
|
|
},
|
|
didMount: function () {
|
|
var enableMarquee = this.props.enableMarquee;
|
|
this.showError();
|
|
if (enableMarquee) {
|
|
this.measureText(this.startMarquee.bind(this));
|
|
}
|
|
},
|
|
didUpdate: function () {
|
|
var enableMarquee = this.props.enableMarquee;
|
|
this.showError();
|
|
// 这里更新处理的原因是防止notice内容在动画过程中发生改变。
|
|
if (enableMarquee) {
|
|
this.measureText(this.startMarquee.bind(this));
|
|
}
|
|
},
|
|
pageEvents: {
|
|
onShow: function () {
|
|
this.resetState();
|
|
},
|
|
},
|
|
methods: {
|
|
resetState: function () {
|
|
var _this = this;
|
|
if (this.props.enableMarquee) {
|
|
this.setData({
|
|
marqueeStyle: '',
|
|
animatedWidth: 0,
|
|
overflowWidth: 0,
|
|
duration: 0,
|
|
viewWidth: 0,
|
|
}, function () {
|
|
_this.resetMarquee();
|
|
_this.measureText(_this.startMarquee.bind(_this));
|
|
});
|
|
}
|
|
},
|
|
showError: function () {
|
|
var actions = this.props.actions;
|
|
if (!Array.isArray(actions) && typeof actions !== 'undefined') {
|
|
console_1.log.warn('NoticeBar', "\u5F53\u524D\u5B9A\u4E49\u7684 actions \u7684\u7C7B\u578B\u4E3A ".concat(typeof actions, "\uFF0C\u4E0D\u7B26\u5408\u5C5E\u6027\u5B9A\u4E49\uFF0C\u5E94\u8BE5\u4E3A\u6570\u7EC4\uFF0C\u5982\uFF1Aactions=\"{{['\u503C', '\u503C']}}"));
|
|
}
|
|
},
|
|
onTap: function () {
|
|
var _a = this.props, mode = _a.mode, onTap = _a.onTap;
|
|
if (mode === 'link' && typeof onTap === 'function') {
|
|
return onTap();
|
|
}
|
|
if (mode === 'closeable' && typeof onTap === 'function') {
|
|
this.setData({
|
|
show: false,
|
|
});
|
|
return onTap();
|
|
}
|
|
},
|
|
// 文本滚动的计算
|
|
resetMarquee: function () {
|
|
var loop = this.props.loop;
|
|
var viewWidth = this.data.viewWidth;
|
|
var showMarqueeWidth = '0px';
|
|
if (loop) {
|
|
showMarqueeWidth = "".concat(viewWidth, "px");
|
|
}
|
|
var marqueeStyle = "transform: translate3d(".concat(showMarqueeWidth, ", 0, 0); transition: 0s all linear;");
|
|
this.setData({
|
|
marqueeStyle: marqueeStyle,
|
|
});
|
|
},
|
|
startMarquee: function () {
|
|
var loop = this.props.loop;
|
|
var leading = 500;
|
|
var _a = this.data, duration = _a.duration, overflowWidth = _a.overflowWidth, viewWidth = _a.viewWidth;
|
|
var marqueeScrollWidth = overflowWidth;
|
|
if (loop) {
|
|
marqueeScrollWidth = overflowWidth + viewWidth;
|
|
}
|
|
var marqueeStyle = "transform: translate3d(".concat(-marqueeScrollWidth, "px, 0, 0); transition: ").concat(duration, "s all linear ").concat(typeof leading === 'number' ? "".concat(leading / 1000, "s") : '0s', ";");
|
|
if (this.data.marqueeStyle !== marqueeStyle) {
|
|
this.setData({
|
|
marqueeStyle: marqueeStyle,
|
|
});
|
|
}
|
|
},
|
|
onTransitionEnd: function () {
|
|
var _this = this;
|
|
var loop = this.props.loop;
|
|
var trailing = 200;
|
|
if (loop) {
|
|
setTimeout(function () {
|
|
_this.resetMarquee();
|
|
_this.measureText(_this.startMarquee.bind(_this));
|
|
}, trailing);
|
|
}
|
|
},
|
|
measureText: function (callback) {
|
|
var _this = this;
|
|
var fps = 40;
|
|
var loop = this.props.loop;
|
|
// 计算文本所占据的宽度，计算需要滚动的宽度
|
|
setTimeout(function () {
|
|
my.createSelectorQuery()
|
|
.select(".ant-notice-bar-marquee-".concat(_this.$id))
|
|
.boundingClientRect()
|
|
.select(".ant-notice-bar-content-".concat(_this.$id))
|
|
.boundingClientRect()
|
|
.exec(function (ret) {
|
|
var _a;
|
|
// eslint-disable-next-line max-len
|
|
var overflowWidth = (ret && ret[0] && ret[1] && (ret[0].width - ret[1].width)) || 0;
|
|
var viewWidth = ((_a = ret[1]) === null || _a === void 0 ? void 0 : _a.width) || 0;
|
|
var marqueeScrollWidth = overflowWidth;
|
|
if (loop) {
|
|
marqueeScrollWidth = overflowWidth + viewWidth;
|
|
}
|
|
if (overflowWidth > 0) {
|
|
_this.setData({
|
|
overflowWidth: overflowWidth,
|
|
viewWidth: viewWidth,
|
|
duration: (marqueeScrollWidth / fps),
|
|
});
|
|
callback();
|
|
}
|
|
});
|
|
}, 0);
|
|
},
|
|
},
|
|
}); |