@tarojs/components/dist/collection/components/scroll-view/scroll-view.js

Taro 组件库。

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Component, h, Prop, Event, Watch, Element, Host } from '@stencil/core';
import classNames from 'classnames';
import { debounce } from '../../utils';
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();
}
export class ScrollView {
  constructor() {
    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)));
  }
  static get is() { return "taro-scroll-view-core"; }
  static get originalStyleUrls() { return {
    "$": ["./style/index.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["./style/index.css"]
  }; }
  static get properties() { return {
    "scrollX": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scroll-x",
      "reflect": false,
      "defaultValue": "false"
    },
    "scrollY": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scroll-y",
      "reflect": false,
      "defaultValue": "false"
    },
    "upperThreshold": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | string",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "upper-threshold",
      "reflect": false,
      "defaultValue": "50"
    },
    "lowerThreshold": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | string",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "lower-threshold",
      "reflect": false,
      "defaultValue": "50"
    },
    "mpScrollTop": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | string",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scroll-top",
      "reflect": false
    },
    "mpScrollLeft": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | string",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scroll-left",
      "reflect": false
    },
    "mpScrollIntoView": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scroll-into-view",
      "reflect": false
    },
    "scrollWithAnimation": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scroll-with-animation",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get events() { return [{
      "method": "onScroll",
      "name": "scroll",
      "bubbles": false,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "onScrollToUpper",
      "name": "scrolltoupper",
      "bubbles": false,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "onScrollToLower",
      "name": "scrolltolower",
      "bubbles": false,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "mpScrollLeft",
      "methodName": "watchScrollLeft"
    }, {
      "propName": "mpScrollTop",
      "methodName": "watchScrollTop"
    }, {
      "propName": "mpScrollIntoView",
      "methodName": "watchScrollIntoView"
    }]; }
}