@tarojs/components/dist/esm/taro-scroll-view-core.entry.js

Taro 组件库。

import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5bd7cbab.js';
import { c as classnames } from './index-cd1a2d33.js';
import { d as debounce } from './index-cad8203e.js';

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}";

function easeOutScroll(from, to, callback) {
  if (from === to || typeof from !== 'number') {
    return;
  }
  const change = to - from;
  const dur = 500;
  const sTime = Date.now();
  const isLarger = to >= from;
  function linear(t, b, c, d) {
    return c * t / d + b;
  }
  function step() {
    from = linear(Date.now() - sTime, from, change, dur);
    if ((isLarger && from >= to) || (!isLarger && to >= from)) {
      callback(to);
      return;
    }
    callback(from);
    requestAnimationFrame(step);
  }
  step();
}
let ScrollView = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.onScroll = createEvent(this, "scroll", 3);
    this.onScrollToUpper = createEvent(this, "scrolltoupper", 3);
    this.onScrollToLower = createEvent(this, "scrolltolower", 3);
    this.scrollX = false;
    this.scrollY = false;
    this.upperThreshold = 50;
    this.lowerThreshold = 50;
    this.scrollWithAnimation = false;
    this.handleScroll = (e) => {
      if (e instanceof CustomEvent)
        return;
      const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = this.el;
      this._scrollLeft = scrollLeft;
      this._scrollTop = scrollTop;
      this.upperAndLower();
      this.onScroll.emit({
        scrollLeft,
        scrollTop,
        scrollHeight,
        scrollWidth
      });
    };
    this.upperAndLower = debounce(() => {
      const { offsetWidth, offsetHeight, scrollLeft, scrollTop, scrollHeight, scrollWidth } = this.el;
      const lowerThreshold = Number(this.lowerThreshold);
      const upperThreshold = Number(this.upperThreshold);
      if (!isNaN(lowerThreshold) &&
        ((this.scrollY && offsetHeight + scrollTop + lowerThreshold >= scrollHeight) ||
          (this.scrollX && offsetWidth + scrollLeft + lowerThreshold >= scrollWidth))) {
        this.onScrollToLower.emit({
          direction: this.scrollX ? 'right' : (this.scrollY ? 'bottom' : '')
        });
      }
      if (!isNaN(upperThreshold) &&
        ((this.scrollY && scrollTop <= upperThreshold) ||
          (this.scrollX && scrollLeft <= upperThreshold))) {
        this.onScrollToUpper.emit({
          direction: this.scrollX ? 'left' : (this.scrollY ? 'top' : '')
        });
      }
    }, 200);
  }
  watchScrollLeft(newVal) {
    const scrollLeft = Number(newVal);
    if (this.scrollX &&
      !isNaN(scrollLeft) &&
      scrollLeft !== this._scrollLeft) {
      if (this.scrollWithAnimation) {
        easeOutScroll(this._scrollLeft, scrollLeft, pos => (this.el.scrollLeft = pos));
      }
      else {
        this.el.scrollLeft = scrollLeft;
      }
      this._scrollLeft = scrollLeft;
    }
  }
  watchScrollTop(newVal) {
    const scrollTop = Number(newVal);
    if (this.scrollY &&
      !isNaN(scrollTop) &&
      scrollTop !== this._scrollTop) {
      if (this.scrollWithAnimation) {
        easeOutScroll(this._scrollTop, scrollTop, pos => (this.el.scrollTop = pos));
      }
      else {
        this.el.scrollTop = scrollTop;
      }
      this._scrollTop = scrollTop;
    }
  }
  watchScrollIntoView(newVal) {
    var _a;
    if (typeof newVal === 'string' && newVal) {
      (_a = document.querySelector(`#${newVal}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'start'
      });
    }
  }
  componentDidLoad() {
    const { scrollY, scrollX, scrollWithAnimation } = this;
    const scrollTop = Number(this.mpScrollTop);
    const scrollLeft = Number(this.mpScrollLeft);
    if (scrollY && !isNaN(scrollTop)) {
      if (scrollWithAnimation) {
        easeOutScroll(0, scrollTop, pos => (this.el.scrollTop = pos));
      }
      else {
        this.el.scrollTop = scrollTop;
      }
      this._scrollTop = scrollTop;
    }
    if (scrollX && !isNaN(scrollLeft)) {
      if (scrollWithAnimation) {
        easeOutScroll(0, scrollLeft, pos => (this.el.scrollLeft = pos));
      }
      else {
        this.el.scrollLeft = scrollLeft;
      }
      this._scrollLeft = scrollLeft;
    }
  }
  render() {
    const { scrollX, scrollY } = this;
    const cls = classnames({
      'taro-scroll-view__scroll-x': scrollX,
      'taro-scroll-view__scroll-y': scrollY
    });
    return (h(Host, { class: cls, onScroll: this.handleScroll }, h("slot", null)));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "mpScrollLeft": ["watchScrollLeft"],
    "mpScrollTop": ["watchScrollTop"],
    "mpScrollIntoView": ["watchScrollIntoView"]
  }; }
};
ScrollView.style = indexCss;

export { ScrollView as taro_scroll_view_core };