@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-ab3c86da.js';
import { c as classnames } from './index-c3e4004b.js';
import { d as debounce } from './index-a00a7418.js';
import { h as handleStencilNodes } from './helper-8a85bb65.js';
import '@tarojs/taro';

const indexCss = "taro-scroll-view-core{-webkit-overflow-scrolling:auto;width:100%;display:block}taro-scroll-view-core::-webkit-scrollbar{display:none}.taro-scroll-view__scroll-x{overflow:scroll hidden}.taro-scroll-view__scroll-y{overflow:hidden scroll}";

function easeOutScroll(from, to, duration = 500, callback) {
  if (from === to || typeof from !== 'number') {
    return;
  }
  const change = to - from;
  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, duration);
    if ((isLarger && from >= to) || (!isLarger && to >= from)) {
      callback(to);
      return;
    }
    callback(from);
    requestAnimationFrame(step);
  }
  step();
}
const 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._scrollLeft = 0;
    this._scrollTop = 0;
    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);
    this.scrollX = false;
    this.scrollY = false;
    this.upperThreshold = 50;
    this.lowerThreshold = 50;
    this.mpScrollTop = undefined;
    this.mpScrollLeft = undefined;
    this.mpScrollIntoView = undefined;
    this.mpScrollIntoViewAlignment = undefined;
    this.animated = false;
  }
  watchScrollLeft(newVal) {
    const left = Number(newVal);
    const { animated } = this;
    this.mpScrollToMethod({
      left, animated
    });
  }
  watchScrollTop(newVal) {
    const top = Number(newVal);
    const { animated } = this;
    this.mpScrollToMethod({
      top, animated
    });
  }
  watchScrollIntoView(newVal) {
    this.mpScrollIntoViewMethod(newVal);
  }
  handleScroll(e) {
    var _a;
    if (e instanceof CustomEvent)
      return;
    e.stopPropagation();
    (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
    const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = this.el;
    this._scrollLeft = scrollLeft;
    this._scrollTop = scrollTop;
    this.upperAndLower();
    this.onScroll.emit({
      scrollLeft,
      scrollTop,
      scrollHeight,
      scrollWidth
    });
  }
  handleTouchMove(e) {
    if (e instanceof CustomEvent)
      return;
    e.stopPropagation();
  }
  async mpScrollToMethod(object) {
    let { top, left, duration, animated = false } = object;
    if (this.scrollY && typeof top === 'number' && !isNaN(top) && top !== this._scrollTop) {
      if (animated) {
        easeOutScroll(this._scrollTop, top, duration, pos => (this.el.scrollTop = pos));
      }
      else {
        this.el.scrollTop = top;
      }
      this._scrollTop = top;
    }
    if (this.scrollX && typeof left === 'number' && !isNaN(left) && left !== this._scrollLeft) {
      if (animated) {
        easeOutScroll(this._scrollLeft, left, duration, pos => (this.el.scrollLeft = pos));
      }
      else {
        this.el.scrollLeft = left;
      }
      this._scrollLeft = left;
    }
  }
  async mpScrollIntoViewMethod(selector) {
    var _a;
    if (typeof selector === 'string' && selector) {
      (_a = document.querySelector(`#${selector}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
        behavior: this.animated ? 'smooth' : 'auto',
        block: this.scrollY ? (this.mpScrollIntoViewAlignment || 'center') : 'center',
        inline: this.scrollX ? (this.mpScrollIntoViewAlignment || 'start') : 'start'
      });
    }
  }
  componentDidLoad() {
    const top = Number(this.mpScrollTop);
    const left = Number(this.mpScrollLeft);
    const { animated } = this;
    this.mpScrollToMethod({
      top, left, animated
    });
  }
  componentDidRender() {
    handleStencilNodes(this.el);
  }
  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 }, 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 };