uniapp-dyckui 4.1.1

package/src/components/MyComs/InfiniteScroll/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <view
+    ref="scrollContainer"
+    class="sw-infinite-scroll"
+    :style="containerStyle"
+    @scroll="handleScroll"
+  >
+    <!-- 内容区域 -->
+    <view class="sw-infinite-scroll__content">
+      <slot />
+    </view>
+
+    <!-- 加载状态 -->
+    <view v-if="loading" class="sw-infinite-scroll__loading">
+      <view class="loading-spinner" />
+      <text>{{ loadingText }}</text>
+    </view>
+
+    <!-- 无更多数据 -->
+    <view v-if="finished && !loading" class="sw-infinite-scroll__finished">
+      {{ finishedText }}
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+// 定义组件属性
+interface Props {
+  // 是否正在加载
+  loading?: boolean
+  // 是否已加载完成
+  finished?: boolean
+  // 触发加载的距离阈值 (px)
+  offset?: number
+  // 加载提示文字
+  loadingText?: string
+  // 加载完成提示文字
+  finishedText?: string
+  // 是否禁用滚动加载
+  disabled?: boolean
+  // 容器高度
+  height?: string | number
+}
+
+// 设置默认属性
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  finished: false,
+  offset: 100,
+  loadingText: '加载中...',
+  finishedText: '没有更多了',
+  disabled: false,
+  height: 'auto',
+})
+
+// 定义组件事件
+const emit = defineEmits<{
+  // 触发加载事件
+  (e: 'load'): void
+}>()
+
+// 容器引用
+const scrollContainer = ref<any>(null)
+
+// 容器样式
+const containerStyle = computed(() => {
+  return {
+    height: typeof props.height === 'number' ? `${props.height}px` : props.height,
+  }
+})
+
+// 处理滚动事件
+function handleScroll() {
+  if (!scrollContainer.value || props.loading || props.finished || props.disabled) {
+    return
+  }
+
+  const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value
+
+  // 当滚动到底部附近时触发加载
+  if (scrollHeight - scrollTop - clientHeight <= props.offset) {
+    emit('load')
+  }
+}
+
+// 监听窗口大小变化
+let resizeTimeout: number | null = null
+
+function handleResize() {
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout)
+  }
+  // 使用标准setTimeout确保跨平台兼容
+  resizeTimeout = setTimeout(() => {
+    handleScroll()
+  }, 100) as unknown as number
+}
+
+onMounted(() => {
+  // 初始化检查是否已滚动到底部
+  handleScroll()
+
+  // #ifdef H5
+  // 只有H5平台支持window对象
+  window.addEventListener('resize', handleResize)
+  // #endif
+})
+
+onUnmounted(() => {
+  // #ifdef H5
+  // 只有H5平台支持window对象
+  window.removeEventListener('resize', handleResize)
+  // #endif
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout)
+  }
+})
+</script>
+
+<style lang="less" scoped>
+// 基础样式
+.sw-infinite-scroll {
+  overflow-y: auto;
+  position: relative;
+
+  // 内容区域
+  &__content {
+    min-height: 100%;
+  }
+
+  // 加载状态
+  &__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40rpx 0;
+    color: #909399;
+    font-size: 28rpx;
+
+    .loading-spinner {
+      width: 32rpx;
+      height: 32rpx;
+      border: 4rpx solid #d9d9d9;
+      border-top-color: #409eff;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin-right: 16rpx;
+    }
+  }
+
+  // 无更多数据
+  &__finished {
+    text-align: center;
+    padding: 40rpx 0;
+    color: #909399;
+    font-size: 28rpx;
+  }
+}
+
+// 加载动画
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>