feat: add infinite-scroll

Author: linzhe141

packages/components/carousel/src/Carousel.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import { Props } from './type'
 import { useCarousel } from './useCarousel'
+import { prefixed } from '@linzhe-tools/shared'
+
+const name = 'carousel'
+
 defineOptions({ name: 'Carousel' })
 const props = withDefaults(defineProps<Partial<Props>>(), {
   interval: 5000,
@@ -16,11 +20,11 @@ const {
 </script>
 <template>
   <div
-    class="linzhe-tools-carousel-wrap"
+    :class="`${prefixed}-${name}-wrap`"
     @mouseleave="mouseleaveHandle"
     @mouseenter="mouseenterHandle"
   >
-    <Transition name="linzhe-tools-carousel-arrow-left">
+    <Transition :name="`${prefixed}-${name}-arrow-left`">
       <div v-show="showArrow" class="btn prev-btn" @click="prevHandle">
         <svg width="36" height="36">
           <polygon
@@ -33,7 +37,7 @@ const {
         </svg>
       </div>
     </Transition>
-    <Transition name="linzhe-tools-carousel-arrow-right">
+    <Transition :name="`${prefixed}-${name}-arrow-right`">
       <div v-show="showArrow" class="btn next-btn" @click="nextHandle">
         <svg width="36" height="36">
           <polygon

packages/components/carousel/src/CarouselItem.vue

@@ -1,15 +1,22 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { useCarouselItem } from './useCarouselItem'
+import { prefixed } from '@linzhe-tools/shared'
+
+const name = 'carousel-item'
+
 defineOptions({ name: 'CarouselItem' })
 const { isAnimation, wrapItemStyle } = useCarouselItem()
+const classList = computed(() => {
+  const result = {
+    'is-animation': isAnimation.value,
+  }
+  result[`${prefixed}-${name}-wrap`] = true
+  return result
+})
 </script>
 <template>
-  <div
-    ref="itemDomRef"
-    class="linzhe-tools-carousel-item-wrap"
-    :class="{ 'is-animation': isAnimation }"
-    :style="wrapItemStyle"
-  >
+  <div ref="itemDomRef" :class="classList" :style="wrapItemStyle">
     <slot></slot>
   </div>
 </template>

packages/components/index.ts

@@ -3,3 +3,4 @@ export * from './number-scroll'
 export * from './scale-screen'
 export * from './seamless-scroll'
 export * from './watermark'
+export * from './infinite-scroll'

packages/components/infinite-scroll/index.ts

@@ -0,0 +1,3 @@
+import InfiniteScroll from './src/InfiniteScroll.vue'
+
+export { InfiniteScroll }

packages/components/infinite-scroll/src/InfiniteScroll.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted } from 'vue'
+import { prefixed } from '@linzhe-tools/shared'
+
+const name = 'infinite-scroll'
+
+const props = defineProps({
+  // 当最后一个元素滚动到 <= distance到视窗时，触发新的加载
+  // 但因为额外的检测底部96px{假设的distance} >= 新的元素的合计的高度，则这个一直在视窗内，不会触发检测了
+  // 根据实际情况谨慎设置
+  //! not watch this prop[distance] to rehandle
+  distance: Number,
+  onScrollBottom: Function,
+})
+
+const wrapperRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const placeholderRef = ref<HTMLElement | null>(null)
+
+let enableCheckScrollBottom = false
+
+let observer: IntersectionObserver | null = null
+const pendingOnScrollBottom = ref(false)
+onMounted(() => {
+  if (contentRef.value && wrapperRef.value) {
+    const wrapperHeight = wrapperRef.value.getBoundingClientRect().height
+    const contentHeight = contentRef.value.getBoundingClientRect().height
+    enableCheckScrollBottom = wrapperHeight < contentHeight
+    const options: IntersectionObserverInit = { root: wrapperRef.value }
+    if (props.distance) {
+      options.rootMargin = `0px 0px ${props.distance}px 0px`
+    }
+
+    observer = new IntersectionObserver(async (entries) => {
+      const entry = entries[0]
+      if (pendingOnScrollBottom.value === false) {
+        if (
+          entry.isIntersecting &&
+          props.onScrollBottom &&
+          enableCheckScrollBottom
+        ) {
+          pendingOnScrollBottom.value = true
+          await props.onScrollBottom()
+          pendingOnScrollBottom.value = false
+        }
+      }
+    }, options)
+    observer.observe(placeholderRef.value!)
+  }
+})
+onUnmounted(() => {
+  if (observer) {
+    observer.disconnect()
+  }
+})
+</script>
+
+<template>
+  <div :class="`${prefixed}-${name}-wrapper`" ref="wrapperRef">
+    <div :class="`${prefixed}-${name}-content`" ref="contentRef">
+      <slot></slot>
+    </div>
+    <div
+      :class="`${prefixed}-${name}-bottom-placeholder`"
+      ref="placeholderRef"
+    ></div>
+    <slot v-if="pendingOnScrollBottom" name="pendingOnScrollBottom"></slot>
+  </div>
+</template>
+<style>
+.linzhe-tools-infinite-scroll-wrapper {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>

packages/components/number-scroll/src/NumberScroll.vue

@@ -1,16 +1,20 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { prefixed } from '@linzhe-tools/shared'
+
+const name = 'number-scroll'
+
+defineOptions({ name: 'NumberScroll' })
 type Props = {
   numberString: string
 }
 defineProps<Props>()
-defineOptions({ name: 'NumberScroll' })
 const numReg = /\d/
 const isNumber = computed(() => (data: string) => numReg.test(data))
 const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 </script>
 <template>
-  <div class="linzhe-tools-number-scroll-wrap">
+  <div :class="`${prefixed}-${name}-wrap`">
     <div v-for="(item, i) in numberString" :key="i">
       <div v-if="isNumber(item)" class="item">
         <div

packages/components/scale-screen/src/ScaleScreen.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import { useScaleScreen } from './useScaleScreen'
 import { Props } from './type'
+import { prefixed } from '@linzhe-tools/shared'
+
+const name = 'scale-screen'
+
 defineOptions({ name: 'ScaleScreen' })
 const props = withDefaults(defineProps<Partial<Props>>(), {
   height: 1080,
@@ -19,7 +23,7 @@ const {
 defineExpose({ fullScreen, exitScreen })
 </script>
 <template>
-  <div class="linzhe-tools-scale-screen-wrap" ref="wrapper">
+  <div :class="`${prefixed}-${name}-wrap`" ref="wrapper">
     <div class="container" ref="scaleWrapper" :style="scaleWrapperStyle">
       <slot :slotProps="slotProps"></slot>
     </div>

packages/components/seamless-scroll/src/SeamlessScroll.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import { Props } from './type'
 import { useSeamlessScroll } from './useSeamlessScroll'
+import { prefixed } from '@linzhe-tools/shared'
+
+const name = 'seamless-scroll'
+
 defineOptions({ name: 'SeamlessScroll' })
 const props = withDefaults(defineProps<Partial<Props>>(), {
   height: 500,
@@ -18,7 +22,7 @@ const {
 </script>
 <template>
   <div
-    class="linzhe-tools-seamless-scroll-wrap"
+    :class="`${prefixed}-${name}-wrap`"
     :style="{ height: height + 'px', overflow: 'hidden' }"
   >
     <div

packages/components/watermark/src/Watermark.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import { Props } from './type'
 import { useWatermark } from './useWatermark'
+import { prefixed } from '@linzhe-tools/shared'
+
+const name = 'watermark'
+
 defineOptions({ name: 'Watermark' })
 const props = withDefaults(defineProps<Partial<Props>>(), {
   text: '',
@@ -11,7 +15,7 @@ const props = withDefaults(defineProps<Partial<Props>>(), {
 const { watermarkWrapper } = useWatermark(props)
 </script>
 <template>
-  <div class="linzhe-tools-watermark-wrap">
+  <div :class="`${prefixed}-${name}-wrap`">
     <div class="container" ref="watermarkWrapper">
       <slot></slot>
     </div>

packages/shared/index.ts

@@ -8,3 +8,5 @@ export function debounce(fn: (...args: any[]) => any, delay: number = 100) {
     }, delay)
   }
 }
+
+export const prefixed = 'linzhe-tools'