@nutui/nutui 3.1.18-beta.0 → 3.1.19-beta.1

package/dist/packages/_es/InfiniteLoading.js

@@ -18,13 +18,16 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.18-beta.0 Tue Mar 08 2022 10:41:31 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive, computed, onMounted, onUnmounted, ref, onActivated, onDeactivated, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, toDisplayString, renderSlot, createCommentVNode } from "vue";
+import { reactive, computed, onMounted, toRefs, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementVNode, normalizeStyle, createVNode, toDisplayString, renderSlot, createElementBlock, createCommentVNode } from "vue";
 import { c as createComponent } from "./component.js";
+import _sfc_main$1 from "./Icon.js";
+import Taro from "@tarojs/taro";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "./pxCheck.js";
 const { componentName, create } = createComponent("infiniteloading");
 const _sfc_main = create({
   props: {
@@ -36,6 +39,10 @@ const _sfc_main = create({
       type: Number,
       default: 200
     },
+    upperThreshold: {
+      type: Number,
+      default: 40
+    },
     pullIcon: {
       type: String,
       default: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png"
@@ -74,14 +81,16 @@ const _sfc_main = create({
     }
   },
   emits: ["scroll-change", "load-more", "refresh"],
+  components: {
+    "nut-icon": _sfc_main$1
+  },
   setup(props, { emit, slots }) {
     const state = reactive({
-      scrollEl: window,
-      scroller: null,
-      refreshTop: null,
-      beforeScrollTop: 0,
-      isTouching: false,
+      scrollHeight: 0,
+      scrollTop: 0,
       isInfiniting: false,
+      direction: "down",
+      isTouching: false,
       refreshMaxH: 0,
       y: 0,
       x: 0,
@@ -100,69 +109,43 @@ const _sfc_main = create({
       };
     });
     const getParentElement = (el) => {
-      return !!props.containerId ? document.querySelector(`#${props.containerId}`) : el && el.parentNode;
-    };
-    const requestAniFrame = () => {
-      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) {
-        window.setTimeout(callback, 1e3 / 60);
-      };
+      return Taro.createSelectorQuery().select(!!props.containerId ? `#${props.containerId} #${el}` : `#${el}`);
     };
-    const getWindowScrollTop = () => {
-      return window.pageYOffset !== void 0 ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+    const getScrollHeight = () => {
+      const parentElement = getParentElement("scroller");
+      parentElement.boundingClientRect((rect) => {
+        state.scrollHeight = rect.height;
+      }).exec();
     };
-    const calculateTopPosition = (el) => {
-      return !el ? 0 : el.offsetTop + calculateTopPosition(el.offsetParent);
-    };
-    const isScrollAtBottom = () => {
-      let offsetDistance = 0;
-      let resScrollTop = 0;
-      let direction = "down";
-      const windowScrollTop = getWindowScrollTop();
-      if (props.useWindow) {
-        if (state.scroller) {
-          offsetDistance = calculateTopPosition(state.scroller) + state.scroller.offsetHeight - windowScrollTop - window.innerHeight;
-        }
-        resScrollTop = windowScrollTop;
+    const lower = () => {
+      if (state.direction == "up" || !props.hasMore || state.isInfiniting) {
+        return false;
       } else {
-        const { scrollHeight, clientHeight, scrollTop } = state.scrollEl;
-        offsetDistance = scrollHeight - clientHeight - scrollTop;
-        resScrollTop = scrollTop;
+        state.isInfiniting = true;
+        emit("load-more", infiniteDone);
+      }
+    };
+    const scroll = (e) => {
+      if (e.detail.scrollTop <= 0) {
+        e.detail.scrollTop = 0;
+      } else if (e.detail.scrollTop >= state.scrollHeight) {
+        e.detail.scrollTop = state.scrollHeight;
       }
-      if (state.beforeScrollTop > resScrollTop) {
-        direction = "up";
+      if (e.detail.scrollTop > state.scrollTop || e.detail.scrollTop >= state.scrollHeight) {
+        state.direction = "down";
       } else {
-        direction = "down";
+        state.direction = "up";
       }
-      state.beforeScrollTop = resScrollTop;
-      emit("scroll-change", resScrollTop);
-      return offsetDistance <= props.threshold && direction == "down";
+      state.scrollTop = e.detail.scrollTop;
+      emit("scroll-change", e.detail.scrollTop);
     };
     const infiniteDone = () => {
       state.isInfiniting = false;
     };
-    const handleScroll = () => {
-      requestAniFrame()(() => {
-        if (!isScrollAtBottom() || !props.hasMore || state.isInfiniting) {
-          return false;
-        } else {
-          state.isInfiniting = true;
-          emit("load-more", infiniteDone);
-        }
-      });
-    };
-    const scrollListener = () => {
-      state.scrollEl.addEventListener("scroll", handleScroll, props.useCapture);
-    };
-    const refreshDone = () => {
-      state.distance = 0;
-      state.isTouching = false;
-    };
     const touchStart = (event) => {
-      if (state.beforeScrollTop == 0 && !state.isTouching && props.isOpenRefresh) {
+      if (state.scrollTop == 0 && !state.isTouching && props.isOpenRefresh) {
         state.y = event.touches[0].pageY;
         state.isTouching = true;
-        const childHeight = state.refreshTop.firstElementChild.offsetHeight;
-        state.refreshMaxH = Math.floor(childHeight * 1 + 10);
       }
     };
     const touchMove = (event) => {
@@ -183,28 +166,21 @@ const _sfc_main = create({
         emit("refresh", refreshDone);
       }
     };
+    const refreshDone = () => {
+      state.distance = 0;
+      state.isTouching = false;
+    };
     onMounted(() => {
-      const parentElement = getParentElement(state.scroller);
-      state.scrollEl = props.useWindow ? window : parentElement;
-      scrollListener();
-    });
-    onUnmounted(() => {
-      state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
-    });
-    const isKeepAlive = ref(false);
-    onActivated(() => {
-      if (isKeepAlive.value) {
-        isKeepAlive.value = false;
-        scrollListener();
-      }
-    });
-    onDeactivated(() => {
-      isKeepAlive.value = true;
-      state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
+      state.refreshMaxH = props.upperThreshold;
+      setTimeout(() => {
+        getScrollHeight();
+      }, 200);
     });
     return __spreadProps(__spreadValues({
       classes
     }, toRefs(state)), {
+      lower,
+      scroll,
       touchStart,
       touchMove,
       touchEnd,
@@ -212,7 +188,10 @@ const _sfc_main = create({
     });
   }
 });
-const _hoisted_1 = { class: "top-box" };
+const _hoisted_1 = {
+  class: "top-box",
+  id: "refreshTop"
+};
 const _hoisted_2 = { class: "top-text" };
 const _hoisted_3 = { class: "nut-infinite-container" };
 const _hoisted_4 = { class: "nut-infinite-bottom" };
@@ -227,39 +206,46 @@ const _hoisted_7 = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_icon = resolveComponent("nut-icon");
-  return openBlock(), createElementBlock("view", {
+  const _component_scroll_view = resolveComponent("scroll-view");
+  return openBlock(), createBlock(_component_scroll_view, {
     class: normalizeClass(_ctx.classes),
-    ref: "scroller",
-    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
-    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.touchMove && _ctx.touchMove(...args)),
-    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
-  }, [
-    createElementVNode("view", {
-      class: "nut-infinite-top",
-      ref: "refreshTop",
-      style: normalizeStyle(_ctx.getStyle)
-    }, [
-      createElementVNode("view", _hoisted_1, [
-        createVNode(_component_nut_icon, {
-          class: "top-img",
-          name: _ctx.pullIcon
-        }, null, 8, ["name"]),
-        createElementVNode("view", _hoisted_2, toDisplayString(_ctx.pullTxt), 1)
+    scrollY: "true",
+    style: { "height": "100%" },
+    id: "scroller",
+    onScrolltolower: _ctx.lower,
+    onScroll: _ctx.scroll,
+    onTouchstart: _ctx.touchStart,
+    onTouchmove: _ctx.touchMove,
+    onTouchend: _ctx.touchEnd
+  }, {
+    default: withCtx(() => [
+      createElementVNode("view", {
+        class: "nut-infinite-top",
+        style: normalizeStyle(_ctx.getStyle)
+      }, [
+        createElementVNode("view", _hoisted_1, [
+          createVNode(_component_nut_icon, {
+            class: "top-img",
+            name: _ctx.pullIcon
+          }, null, 8, ["name"]),
+          createElementVNode("view", _hoisted_2, toDisplayString(_ctx.pullTxt), 1)
+        ])
+      ], 4),
+      createElementVNode("view", _hoisted_3, [
+        renderSlot(_ctx.$slots, "default")
+      ]),
+      createElementVNode("view", _hoisted_4, [
+        _ctx.isInfiniting ? (openBlock(), createElementBlock("view", _hoisted_5, [
+          createVNode(_component_nut_icon, {
+            class: "bottom-img",
+            name: _ctx.loadIcon
+          }, null, 8, ["name"]),
+          createElementVNode("view", _hoisted_6, toDisplayString(_ctx.loadTxt), 1)
+        ])) : !_ctx.hasMore ? (openBlock(), createElementBlock("view", _hoisted_7, toDisplayString(_ctx.loadMoreTxt), 1)) : createCommentVNode("", true)
       ])
-    ], 4),
-    createElementVNode("view", _hoisted_3, [
-      renderSlot(_ctx.$slots, "default")
     ]),
-    createElementVNode("view", _hoisted_4, [
-      _ctx.isInfiniting ? (openBlock(), createElementBlock("view", _hoisted_5, [
-        createVNode(_component_nut_icon, {
-          class: "bottom-img",
-          name: _ctx.loadIcon
-        }, null, 8, ["name"]),
-        createElementVNode("view", _hoisted_6, toDisplayString(_ctx.loadTxt), 1)
-      ])) : !_ctx.hasMore ? (openBlock(), createElementBlock("view", _hoisted_7, toDisplayString(_ctx.loadMoreTxt), 1)) : createCommentVNode("", true)
-    ])
-  ], 34);
+    _: 3
+  }, 8, ["class", "onScrolltolower", "onScroll", "onTouchstart", "onTouchmove", "onTouchend"]);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+var index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index_taro as default };