jiaqingjiayi-xiaochengxu/甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.js

140 lines
5.4 KiB
JavaScript
Raw Normal View History

2024-11-10 07:01:22 +00:00
"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);
},
},
});