| 1 | import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8809c729.js';
|
| 2 | import { c as classnames } from './index-1d8e8acd.js';
|
| 3 | import { d as debounce } from './index-cad8203e.js';
|
| 4 |
|
| 5 | const indexCss = "taro-scroll-view-core{display:block;width:100%;-webkit-overflow-scrolling:auto}taro-scroll-view-core::-webkit-scrollbar{display:none}.taro-scroll-view__scroll-x{overflow-x:scroll;overflow-y:hidden}.taro-scroll-view__scroll-y{overflow-x:hidden;overflow-y:scroll}";
|
| 6 |
|
| 7 | function easeOutScroll(from, to, callback) {
|
| 8 | if (from === to || typeof from !== 'number') {
|
| 9 | return;
|
| 10 | }
|
| 11 | const change = to - from;
|
| 12 | const dur = 500;
|
| 13 | const sTime = Date.now();
|
| 14 | const isLarger = to >= from;
|
| 15 | function linear(t, b, c, d) {
|
| 16 | return c * t / d + b;
|
| 17 | }
|
| 18 | function step() {
|
| 19 | from = linear(Date.now() - sTime, from, change, dur);
|
| 20 | if ((isLarger && from >= to) || (!isLarger && to >= from)) {
|
| 21 | callback(to);
|
| 22 | return;
|
| 23 | }
|
| 24 | callback(from);
|
| 25 | requestAnimationFrame(step);
|
| 26 | }
|
| 27 | step();
|
| 28 | }
|
| 29 | let ScrollView = class {
|
| 30 | constructor(hostRef) {
|
| 31 | registerInstance(this, hostRef);
|
| 32 | this.onScroll = createEvent(this, "scroll", 3);
|
| 33 | this.onScrollToUpper = createEvent(this, "scrolltoupper", 3);
|
| 34 | this.onScrollToLower = createEvent(this, "scrolltolower", 3);
|
| 35 | this.scrollX = false;
|
| 36 | this.scrollY = false;
|
| 37 | this.upperThreshold = 50;
|
| 38 | this.lowerThreshold = 50;
|
| 39 | this.scrollWithAnimation = false;
|
| 40 | this.handleScroll = (e) => {
|
| 41 | if (e instanceof CustomEvent)
|
| 42 | return;
|
| 43 | const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = this.el;
|
| 44 | this._scrollLeft = scrollLeft;
|
| 45 | this._scrollTop = scrollTop;
|
| 46 | this.upperAndLower();
|
| 47 | this.onScroll.emit({
|
| 48 | scrollLeft,
|
| 49 | scrollTop,
|
| 50 | scrollHeight,
|
| 51 | scrollWidth
|
| 52 | });
|
| 53 | };
|
| 54 | this.upperAndLower = debounce(() => {
|
| 55 | const { offsetWidth, offsetHeight, scrollLeft, scrollTop, scrollHeight, scrollWidth } = this.el;
|
| 56 | const lowerThreshold = Number(this.lowerThreshold);
|
| 57 | const upperThreshold = Number(this.upperThreshold);
|
| 58 | if (!isNaN(lowerThreshold) &&
|
| 59 | ((this.scrollY && offsetHeight + scrollTop + lowerThreshold >= scrollHeight) ||
|
| 60 | (this.scrollX && offsetWidth + scrollLeft + lowerThreshold >= scrollWidth))) {
|
| 61 | this.onScrollToLower.emit({
|
| 62 | direction: this.scrollX ? 'right' : (this.scrollY ? 'bottom' : '')
|
| 63 | });
|
| 64 | }
|
| 65 | if (!isNaN(upperThreshold) &&
|
| 66 | ((this.scrollY && scrollTop <= upperThreshold) ||
|
| 67 | (this.scrollX && scrollLeft <= upperThreshold))) {
|
| 68 | this.onScrollToUpper.emit({
|
| 69 | direction: this.scrollX ? 'left' : (this.scrollY ? 'top' : '')
|
| 70 | });
|
| 71 | }
|
| 72 | }, 200);
|
| 73 | }
|
| 74 | watchScrollLeft(newVal) {
|
| 75 | const scrollLeft = Number(newVal);
|
| 76 | if (this.scrollX &&
|
| 77 | !isNaN(scrollLeft) &&
|
| 78 | scrollLeft !== this._scrollLeft) {
|
| 79 | if (this.scrollWithAnimation) {
|
| 80 | easeOutScroll(this._scrollLeft, scrollLeft, pos => (this.el.scrollLeft = pos));
|
| 81 | }
|
| 82 | else {
|
| 83 | this.el.scrollLeft = scrollLeft;
|
| 84 | }
|
| 85 | this._scrollLeft = scrollLeft;
|
| 86 | }
|
| 87 | }
|
| 88 | watchScrollTop(newVal) {
|
| 89 | const scrollTop = Number(newVal);
|
| 90 | if (this.scrollY &&
|
| 91 | !isNaN(scrollTop) &&
|
| 92 | scrollTop !== this._scrollTop) {
|
| 93 | if (this.scrollWithAnimation) {
|
| 94 | easeOutScroll(this._scrollTop, scrollTop, pos => (this.el.scrollTop = pos));
|
| 95 | }
|
| 96 | else {
|
| 97 | this.el.scrollTop = scrollTop;
|
| 98 | }
|
| 99 | this._scrollTop = scrollTop;
|
| 100 | }
|
| 101 | }
|
| 102 | watchScrollIntoView(newVal) {
|
| 103 | var _a;
|
| 104 | if (typeof newVal === 'string' && newVal) {
|
| 105 | (_a = document.querySelector(`#${newVal}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
| 106 | behavior: 'smooth',
|
| 107 | block: 'center',
|
| 108 | inline: 'start'
|
| 109 | });
|
| 110 | }
|
| 111 | }
|
| 112 | componentDidLoad() {
|
| 113 | const { scrollY, scrollX, scrollWithAnimation } = this;
|
| 114 | const scrollTop = Number(this.mpScrollTop);
|
| 115 | const scrollLeft = Number(this.mpScrollLeft);
|
| 116 | if (scrollY && !isNaN(scrollTop)) {
|
| 117 | if (scrollWithAnimation) {
|
| 118 | easeOutScroll(0, scrollTop, pos => (this.el.scrollTop = pos));
|
| 119 | }
|
| 120 | else {
|
| 121 | this.el.scrollTop = scrollTop;
|
| 122 | }
|
| 123 | this._scrollTop = scrollTop;
|
| 124 | }
|
| 125 | if (scrollX && !isNaN(scrollLeft)) {
|
| 126 | if (scrollWithAnimation) {
|
| 127 | easeOutScroll(0, scrollLeft, pos => (this.el.scrollLeft = pos));
|
| 128 | }
|
| 129 | else {
|
| 130 | this.el.scrollLeft = scrollLeft;
|
| 131 | }
|
| 132 | this._scrollLeft = scrollLeft;
|
| 133 | }
|
| 134 | }
|
| 135 | render() {
|
| 136 | const { scrollX, scrollY } = this;
|
| 137 | const cls = classnames({
|
| 138 | 'taro-scroll-view__scroll-x': scrollX,
|
| 139 | 'taro-scroll-view__scroll-y': scrollY
|
| 140 | });
|
| 141 | return (h(Host, { class: cls, onScroll: this.handleScroll }, h("slot", null)));
|
| 142 | }
|
| 143 | get el() { return getElement(this); }
|
| 144 | static get watchers() { return {
|
| 145 | "mpScrollLeft": ["watchScrollLeft"],
|
| 146 | "mpScrollTop": ["watchScrollTop"],
|
| 147 | "mpScrollIntoView": ["watchScrollIntoView"]
|
| 148 | }; }
|
| 149 | };
|
| 150 | ScrollView.style = indexCss;
|
| 151 |
|
| 152 | export { ScrollView as taro_scroll_view_core };
|