uniapp-dyckui 4.1.1

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

@@ -0,0 +1,599 @@
+<template>
+  <view ref="containerRef" class="infinite-scroll-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @scroll="handleScroll">
+    <!-- 下拉刷新指示器 -->
+    <view
+      class="refresh-indicator"
+      :style="{ height: `${pullDistance}px` }"
+    >
+      <view v-if="refreshStatus !== 'normal' && (refreshStatus === 'refreshing' || pullDistance > 0)" class="refresh-content">
+        <view class="refresh-icon">
+          <!-- 加载中图标 -->
+          <text v-if="props.refreshLoading" class="refresh-loading">●</text>
+          <!-- 下拉箭头图标 -->
+          <text v-else class="refresh-arrow">↓</text>
+        </view>
+        <text class="refresh-text">
+          <template v-if="props.refreshLoading">{{ props.refreshingText }}</template>
+          <template v-else-if="refreshStatus === 'triggered'">{{ props.releaseText }}</template>
+          <template v-else>{{ props.refreshText }}</template>
+        </text>
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <view class="infinite-scroll-content">
+      <slot />
+    </view>
+
+    <!-- 加载指示器 -->
+    <view class="infinite-scroll-indicator">
+      <!-- 加载中 -->
+      <view v-if="loading" class="infinite-scroll-loading">
+        <view class="loading-spinner">
+          <text class="loading-icon">●</text>
+        </view>
+        <text class="loading-text">{{ loadingText }}</text>
+      </view>
+
+      <!-- 加载失败 -->
+      <view v-else-if="error" class="infinite-scroll-error">
+        <text class="error-icon">×</text>
+        <text class="error-text">{{ errorText }}</text>
+        <view class="retry-btn" @click="onRetry">
+          {{ retryText }}
+        </view>
+      </view>
+
+      <!-- 无更多数据 -->
+      <view v-else-if="!hasMore" class="infinite-scroll-no-more">
+        <text class="no-more-text">{{ noMoreText }}</text>
+      </view>
+
+      <!-- 隐藏的触发区域 -->
+      <view
+        v-else
+        class="infinite-scroll-trigger"
+        :style="{ height: `0px` }"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, ref, watch, withDefaults } from 'vue'
+
+// Props
+interface Props {
+  // 加载状态（无限滚动）
+  loading?: boolean
+  // 下拉刷新加载状态
+  refreshLoading?: boolean
+  // 是否还有更多数据
+  hasMore?: boolean
+  // 加载失败状态
+  error?: boolean
+  // 触发无限滚动的阈值距离（像素）
+  threshold?: number
+  // 下拉刷新触发阈值（像素）
+  refreshThreshold?: number
+  // 节流时间（毫秒）
+  throttleTime?: number
+  // 加载中提示文本
+  loadingText?: string
+  // 加载失败提示文本
+  errorText?: string
+  // 重试按钮文本
+  retryText?: string
+  // 无更多数据提示文本
+  noMoreText?: string
+  // 下拉刷新提示文本
+  refreshText?: string
+  // 释放可刷新提示文本
+  releaseText?: string
+  // 正在刷新提示文本
+  refreshingText?: string
+  // 刷新成功提示文本
+  refreshSuccessText?: string
+  // 刷新失败提示文本
+  refreshErrorText?: string
+  // 是否使用窗口作为滚动容器
+  useWindowScroll?: boolean
+  // 是否启用无限滚动
+  enableInfiniteScroll?: boolean
+  // 是否启用下拉刷新
+  enableRefresh?: boolean
+}
+
+// 设置默认属性
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  refreshLoading: false,
+  hasMore: true,
+  error: false,
+  threshold: 30,
+  refreshThreshold: 40,
+  throttleTime: 200,
+  loadingText: '加载中...',
+  errorText: '加载失败',
+  retryText: '点击重试',
+  noMoreText: '没有更多数据了',
+  refreshText: '下拉刷新',
+  releaseText: '释放可刷新',
+  refreshingText: '正在刷新...',
+  refreshSuccessText: '刷新成功',
+  refreshErrorText: '刷新失败',
+  useWindowScroll: false,
+  enableInfiniteScroll: false,
+  enableRefresh: true,
+})
+
+// Emits
+const emit = defineEmits<{
+  (e: 'loadMore'): void
+  (e: 'retry'): void
+  (e: 'refresh'): void
+}>()
+
+// Refs
+const containerRef = ref<any>(null)
+let scrollContainer: any = null
+let lastScrollTime = 0
+
+// 下拉刷新相关状态
+const pullDistance = ref(0) // 当前下拉距离
+const startY = ref(0) // 触摸起始Y坐标
+const isPulling = ref(false) // 是否正在下拉
+const isRefreshing = ref(false) // 是否正在刷新
+const refreshStatus = ref('normal') // 刷新状态：normal(正常)、pulling(下拉中)、triggered(已触发刷新)、refreshing(刷新中)
+
+// Methods
+/**
+ * 获取滚动容器
+ * @returns {any} - 滚动容器对象
+ */
+function getScrollContainer() {
+  if (props.useWindowScroll) {
+    // #ifdef H5
+    return window
+    // #endif
+    // 其他平台返回null或使用默认容器
+    return null
+  }
+  return containerRef.value
+}
+
+/**
+ * 节流函数，限制函数的执行频率
+ * @param {Function} fn - 要执行的函数
+ * @param {number} delay - 延迟时间（毫秒）
+ * @returns {Function} - 节流后的函数
+ */
+function throttle(fn, delay) {
+  return (...args) => {
+    const now = Date.now()
+    if (now - lastScrollTime >= delay) {
+      lastScrollTime = now
+      fn.apply(null, args)
+    }
+  }
+}
+
+/**
+ * 检查是否需要加载更多数据
+ */
+function checkLoadMore() {
+  // 如果无限滚动未启用，直接返回
+  if (!props.enableInfiniteScroll) {
+    return
+  }
+
+  if (props.loading || !props.hasMore || props.error) {
+    return
+  }
+
+  let scrollTop = 0
+  let scrollHeight = 0
+  let clientHeight = 0
+
+  if (props.useWindowScroll) {
+    // #ifdef H5
+    // 使用窗口作为滚动容器
+    scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+    scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
+    clientHeight = window.innerHeight
+    // #endif
+  }
+  else {
+    // 使用组件容器作为滚动容器
+    if (!containerRef.value)
+      return
+    // 确保容器具有滚动相关属性
+    if (typeof containerRef.value.scrollTop !== 'number'
+      || typeof containerRef.value.scrollHeight !== 'number'
+      || typeof containerRef.value.clientHeight !== 'number') {
+      return
+    }
+    scrollTop = containerRef.value.scrollTop
+    scrollHeight = containerRef.value.scrollHeight
+    clientHeight = containerRef.value.clientHeight
+  }
+
+  // 检查是否滚动到了阈值范围内
+  // 如果内容高度小于等于容器高度，说明内容不足一屏，应该直接触发加载更多
+  if ((props.useWindowScroll ? scrollTop > 0 : true) && (scrollHeight <= clientHeight || scrollHeight - scrollTop - clientHeight <= props.threshold)) {
+    // 触发加载更多事件
+    emit('loadMore')
+  }
+}
+
+/**
+ * 触发重试加载事件
+ */
+function onRetry() {
+  emit('retry')
+}
+
+// 触摸开始事件处理
+/**
+ * 处理触摸开始事件，用于初始化下拉刷新
+ * @param {TouchEvent} e - 触摸事件对象
+ */
+function handleTouchStart(e) {
+  // 如果未启用下拉刷新或正在刷新，则不处理
+  if (!props.enableRefresh || props.refreshLoading) {
+    return
+  }
+
+  // 如果滚动容器不在顶部，则不处理下拉刷新
+  let scrollTop = 0
+  if (props.useWindowScroll) {
+    // #ifdef H5
+    scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+    // #endif
+  }
+  else {
+    scrollTop = containerRef.value?.scrollTop || 0
+  }
+
+  if (scrollTop > 0) {
+    return
+  }
+
+  // 记录触摸起始位置
+  startY.value = e.touches[0].clientY
+  isPulling.value = true
+  refreshStatus.value = 'pulling'
+}
+
+// 触摸移动事件处理
+/**
+ * 处理触摸移动事件，用于计算下拉距离和更新刷新状态
+ * @param {TouchEvent} e - 触摸事件对象
+ */
+function handleTouchMove(e) {
+  if (!isPulling.value || props.refreshLoading) {
+    return
+  }
+
+  // 计算下拉距离
+  const currentY = e.touches[0].clientY
+  const distance = currentY - startY.value
+
+  // 只有向下拉才处理
+  if (distance <= 0) {
+    // 如果拉到顶部以下，恢复正常状态
+    if (pullDistance.value > 0) {
+      pullDistance.value = 0
+      refreshStatus.value = 'normal'
+    }
+    return
+  }
+
+  // 调整下拉距离计算，确保有足够空间实现垂直居中
+  pullDistance.value = Math.min(distance * 0.5, props.refreshThreshold * 1.5)
+
+  // 更新刷新状态
+  if (pullDistance.value >= props.refreshThreshold) {
+    refreshStatus.value = 'triggered'
+  }
+  else {
+    refreshStatus.value = 'pulling'
+  }
+
+  // 阻止默认滚动行为
+  e.preventDefault()
+}
+
+// 触摸结束事件处理
+/**
+ * 处理触摸结束事件，用于判断是否触发刷新
+ */
+function handleTouchEnd() {
+  if (!isPulling.value) {
+    return
+  }
+
+  isPulling.value = false
+
+  // 如果下拉距离达到阈值，触发刷新
+  if (pullDistance.value >= props.refreshThreshold && !props.refreshLoading) {
+    isRefreshing.value = true
+    refreshStatus.value = 'refreshing'
+    emit('refresh')
+  }
+  else {
+    // 否则恢复原状
+    pullDistance.value = 0
+    refreshStatus.value = 'normal'
+  }
+}
+
+/**
+ * 处理滚动事件，检查是否需要加载更多（节流处理）
+ */
+const handleScroll = throttle(() => {
+  checkLoadMore()
+}, props.throttleTime)
+
+// 添加滚动事件监听
+/**
+ * 添加滚动事件监听
+ */
+function addScrollListener() {
+  // 使用nextTick确保containerRef已初始化
+  nextTick(() => {
+    scrollContainer = getScrollContainer()
+    if (scrollContainer && typeof scrollContainer.addEventListener === 'function') {
+      scrollContainer.addEventListener('scroll', handleScroll, { passive: true })
+      // 初始检查一次
+      checkLoadMore()
+    }
+  })
+}
+
+// 移除滚动事件监听
+/**
+ * 移除滚动事件监听
+ */
+function removeScrollListener() {
+  if (scrollContainer && typeof scrollContainer.removeEventListener === 'function') {
+    scrollContainer.removeEventListener('scroll', handleScroll)
+    scrollContainer = null
+  }
+}
+
+// 监听容器大小变化
+/**
+ * 处理容器大小变化事件，检查是否需要加载更多（节流处理）
+ */
+const handleResize = throttle(() => {
+  checkLoadMore()
+}, props.throttleTime)
+
+// 监听加载状态变化
+watch(() => props.loading, (newVal) => {
+  if (!newVal) {
+    // 加载完成后，检查是否还需要继续加载
+    // 使用nextTick确保DOM已更新
+    nextTick(() => {
+      checkLoadMore()
+    })
+  }
+})
+
+// 监听错误状态变化
+watch(() => props.error, (newVal) => {
+  if (!newVal) {
+    // 错误状态清除后，检查是否还需要继续加载
+    // 使用nextTick确保DOM已更新
+    nextTick(() => {
+      checkLoadMore()
+    })
+  }
+})
+
+// 监听下拉刷新加载状态变化
+watch(() => props.refreshLoading, (newVal) => {
+  isRefreshing.value = newVal
+
+  if (newVal) {
+    refreshStatus.value = 'refreshing'
+  }
+  else {
+    // 刷新完成后，先重置pullDistance开始回弹
+    pullDistance.value = 0
+    // 保持refreshStatus为'refreshing'直到回弹动画完成
+    // 然后再将状态设置为'normal'
+    // 使用标准setTimeout确保跨平台兼容
+    setTimeout(() => {
+      refreshStatus.value = 'normal'
+    }, 300)
+  }
+})
+
+// 生命周期
+onMounted(() => {
+  // 添加滚动事件监听
+  addScrollListener()
+
+  // 添加窗口大小变化监听
+  // #ifdef H5
+  window.addEventListener('resize', handleResize, { passive: true })
+  // #endif
+})
+
+onUnmounted(() => {
+  // 移除滚动事件监听
+  removeScrollListener()
+
+  // 移除窗口大小变化监听
+  // #ifdef H5
+  window.removeEventListener('resize', handleResize)
+  // #endif
+})
+</script>
+
+<style scoped>
+.infinite-scroll-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.infinite-scroll-content {
+  width: 100%;
+}
+
+.infinite-scroll-indicator {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.infinite-scroll-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20rpx;
+  color: #666;
+  font-size: 28rpx;
+}
+
+.loading-spinner {
+  animation: spin 0.8s linear infinite;
+  color: #409eff;
+}
+
+.loading-icon {
+  font-size: 40rpx;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.infinite-scroll-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20rpx;
+  color: #f56c6c;
+  font-size: 28rpx;
+}
+
+.error-icon {
+  font-size: 40rpx;
+  color: #f56c6c;
+}
+
+.error-text {
+  font-size: 28rpx;
+  color: #f56c6c;
+}
+
+.retry-btn {
+  padding: 8rpx 24rpx;
+  background-color: #409eff;
+  color: white;
+  border: none;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.retry-btn:hover {
+  background-color: #66b1ff;
+}
+
+.infinite-scroll-no-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.no-more-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.infinite-scroll-trigger {
+  width: 100%;
+}
+
+/* 下拉刷新样式 */
+.refresh-indicator {
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  transition: height 0.3s ease;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.refresh-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 16rpx 0;
+  color: white;
+  font-size: 26rpx;
+  align-self: center;
+  flex-shrink: 0;
+  margin-top: 10rpx;
+  font-weight: 500;
+  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
+  border-radius: 20rpx;
+  margin: 8rpx;
+  backdrop-filter: blur(10rpx);
+}
+
+.refresh-icon {
+  margin-right: 10rpx;
+  margin-bottom: 0;
+}
+
+.refresh-icon svg {
+  transition: transform 0.3s ease;
+  color: #409eff;
+  width: 36rpx;
+  height: 36rpx;
+}
+
+.refresh-status-triggered .refresh-icon svg,
+.refresh-status-refreshing .refresh-icon svg {
+  transform: rotate(0deg);
+}
+
+.refresh-status-refreshing .refresh-icon svg {
+  animation: spin 0.8s linear infinite;
+}
+
+.refresh-text {
+  font-size: 28rpx;
+  color: white;
+}
+</style>