vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{VirtualList → components/VirtualList}/index.vue

@@ -1,412 +1,416 @@
-<template>
-  <view :class="['virtual-list-wrapper', className]" :style="wrapperStyle">
-    <scroll-view
-      scroll-y
-      :scroll-x="scrollX && !isEdgeSwipe"
-      class="virtual-list-scroll"
-      :scroll-top="scrollTopVal"
-      :scroll-with-animation="scrollWithAnimation"
-      :scroll-into-view="scrollIntoView"
-      @scroll="handleScroll"
-      @touchstart="onTouchStart"
-      @touchmove="onTouchMove"
-      @touchend="onTouchEnd"
-      @mousedown="onMouseDown">
-      <!-- 滚动容器：统一负责撑开横向和纵向的滚动区域 -->
-      <view class="virtual-list-container" :style="containerStyle">
-        <!-- 实际渲染内容的列表块 -->
-        <view class="virtual-list-content" :style="contentStyle">
-          <view class="virtual-list-measure-inner">
-            <slot
-              :list="visibleData"
-              :startIndex="startIndex"
-              :start="startIndex"
-              :current="Math.floor(startIndex / props.pageSize) + 1"
-              :itemsHeight="itemsHeightMap"
-              :onSizeChange="onSizeChange"></slot>
-          </view>
-        </view>
-      </view>
-    </scroll-view>
-
-    <!-- 返回顶部按钮：移出 scroll-view，绝对定位在 wrapper 内部 -->
-    <view
-      :style="{ display: showBackTop && scrollTop > 200 ? 'flex' : 'none' }"
-      class="virtual-back-top"
-      @click="scrollToTop">
-      ↑
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-import {
-  ref,
-  reactive,
-  computed,
-  watch,
-  nextTick,
-  getCurrentInstance,
-  onMounted,
-} from 'vue';
-
-interface Props {
-  /** 渲染数据源 */
-  data: any[];
-  /** 容器高度 */
-  height?: number | string;
-  /** 每页渲染数量 (虚拟化块大小) */
-  pageSize?: number;
-  /** 预估的项高度 (用于初次计算) */
-  itemHeight?: number;
-  /** 额外的缓冲区数量 (防止滚动过快白屏) */
-  buffer?: number;
-  /** 自定义类名 */
-  className?: string;
-  /** 是否显示返回顶部 */
-  showBackTop?: boolean;
-  /** 数据更新时是否自动滚动到顶部 */
-  dataChangeScrollToTop?: boolean;
-  /** 预加载高度 (兼容 Pro) */
-  preLodeHeight?: number;
-  /** 默认当前页 (从 1 开始) */
-  defaultCurrent?: number;
-  /** 横向滚动 */
-  scrollX?: boolean;
-  /** 滚动动画 */
-  scrollWithAnimation?: boolean;
-  /** 滚动到指定元素 ID */
-  scrollIntoView?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  height: '100%',
-  pageSize: 20,
-  itemHeight: 50,
-  buffer: 5,
-  showBackTop: true,
-  dataChangeScrollToTop: true,
-  preLodeHeight: 100,
-  defaultCurrent: 1,
-  scrollX: false,
-  scrollWithAnimation: false,
-  scrollIntoView: '',
-});
-
-const emit = defineEmits(['scroll']);
-
-/** 定义插槽类型 */
-defineSlots<{
-  default(props: {
-    /** 当前可见数据列表 */
-    list: any[];
-    /** 起始索引 (绝对索引) */
-    startIndex: number;
-    /** 起始索引 (别名，同 startIndex) */
-    start: number;
-    /** 当前页码 (基于 startIndex 和 pageSize 计算) */
-    current: number;
-    /** 各项高度映射记录 */
-    itemsHeight: Record<number, number>;
-    /** 子项尺寸变化回调 */
-    onSizeChange: (index: number, height: number) => void;
-  }): any;
-}>();
-
-// --- 状态变量 ---
-const scrollTop = ref(0);
-const scrollTopVal = ref(0); // 用于控制转跳的响应式值
-const startIndex = ref(0);
-const itemsHeightMap = reactive<Record<number, number>>({}); // 存储每一项的实际高度
-
-const isEdgeSwipe = ref(false);
-const isCapturing = ref(false); // 是否由当前列表锁定捕获手势
-let containerRect = { left: 0, right: 0, width: 0 };
-
-const instance = getCurrentInstance();
-const maxWidth = ref(0);
-
-onMounted(() => {
-  // 获取容器位置和宽度，用于边缘检测
-  uni
-    .createSelectorQuery()
-    .in(instance)
-    .select('.virtual-list-wrapper')
-    .boundingClientRect((data: any) => {
-      if (data) {
-        containerRect = data;
-      }
-    })
-    .exec();
-});
-
-function onTouchStart(e: TouchEvent | MouseEvent) {
-  if (!props.scrollX) return;
-  const touch = (e as TouchEvent).touches
-    ? (e as TouchEvent).touches[0]
-    : (e as MouseEvent);
-  const x = touch.clientX;
-
-  // 如果从边缘 40px 内开始滑动，则视为侧滑切换 Tab，允许事件冒泡到父级
-  const threshold = 40;
-  if (
-    x < containerRect.left + threshold ||
-    x > containerRect.right - threshold
-  ) {
-    isEdgeSwipe.value = true;
-    isCapturing.value = false;
-  } else {
-    isEdgeSwipe.value = false;
-    isCapturing.value = true;
-    // 重要：锁定在此，阻止事件冒泡到 CustomSwiper
-    e.stopPropagation();
-  }
-}
-
-function onTouchMove(e: TouchEvent) {
-  if (isCapturing.value) {
-    // 已经锁定时，继续阻止冒泡，确保父级不会触发滑屏逻辑
-    e.stopPropagation();
-  }
-}
-
-function onTouchEnd(e: TouchEvent | MouseEvent) {
-  if (isCapturing.value) {
-    e.stopPropagation();
-  }
-  isCapturing.value = false;
-  isEdgeSwipe.value = false;
-}
-
-function onMouseDown(e: MouseEvent) {
-  onTouchStart(e);
-}
-
-// 根据 defaultCurrent 初始化位置
-if (props.defaultCurrent > 1) {
-  startIndex.value = Math.max(0, (props.defaultCurrent - 1) * props.pageSize);
-}
-const offset = ref(0);
-
-// 初始化 offset
-if (startIndex.value > 0) {
-  let initialOffset = 0;
-  for (let i = 0; i < startIndex.value; i++) {
-    initialOffset += itemsHeightMap[i] || props.itemHeight;
-  }
-  offset.value = initialOffset;
-}
-
-// --- 计算属性 ---
-// 外层容器样式
-const wrapperStyle = computed(
-  () =>
-    ({
-      height:
-        typeof props.height === 'number' ? `${props.height}px` : props.height,
-      position: 'relative' as const,
-      overflow: 'hidden' as const,
-    }) as any,
-);
-
-// 计算总高度：已测量的高度 + 未测量的默认高度
-const totalHeight = computed(() => {
-  let total = 0;
-  for (let i = 0; i < props.data.length; i++) {
-    total += itemsHeightMap[i] || props.itemHeight;
-  }
-  return total;
-});
-
-// 可见数据切片
-const visibleData = computed(() => {
-  // 我们多渲染一点，避免滚动白屏
-  const end = Math.min(
-    startIndex.value + props.pageSize + props.buffer,
-    props.data.length,
-  );
-  return props.data.slice(startIndex.value, end);
-});
-
-// 滚动容器样式 (撑开滚动区域的核心)
-const containerStyle = computed(() => {
-  const style: any = {
-    height: `${totalHeight.value}px`,
-    position: 'relative',
-    width: '100%',
-  };
-  if (props.scrollX) {
-    if (maxWidth.value) {
-      style.minWidth = `${maxWidth.value}px`;
-    }
-  }
-  return style;
-});
-
-// 内容块样式
-const contentStyle = computed(() => {
-  return {
-    transform: `translateY(${offset.value}px)`,
-    position: 'absolute' as const,
-    left: 0,
-    top: 0,
-    width: '100%',
-    // minWidth: 'max-content',
-  };
-});
-
-// --- 方法 ---
-
-/**
- * 核心滚动处理函数
- */
-const handleScroll = (e: any) => {
-  // Uni-app 环境下 e.detail.scrollTop 可能存在，标准 H5 下是 e.target.scrollTop
-  const st = e.detail?.scrollTop ?? e.target?.scrollTop ?? 0;
-  scrollTop.value = st;
-
-  // 根据当前滚动位置计算 startIndex
-  let accumulatedHeight = 0;
-  let index = -1;
-  const dataLen = props.data.length;
-
-  for (let i = 0; i < dataLen; i++) {
-    const h = itemsHeightMap[i] || props.itemHeight;
-    if (accumulatedHeight + h > st) {
-      index = i;
-      break;
-    }
-    accumulatedHeight += h;
-  }
-
-  // 修复核心：如果 st 很大，超过了所有项的高度和，或者刚好在最后，确保 index 不会回滚到 0
-  if (index === -1) {
-    index = dataLen > 0 ? dataLen - 1 : 0;
-  }
-
-  // 加上缓冲区处理
-  const targetIndex = Math.max(0, index - props.buffer);
-
-  // 更新状态
-  if (targetIndex !== startIndex.value) {
-    startIndex.value = targetIndex;
-
-    // 计算内容块的偏移量：即渲染起始项之前的全部高度
-    let currentOffset = 0;
-    for (let i = 0; i < targetIndex; i++) {
-      currentOffset += itemsHeightMap[i] || props.itemHeight;
-    }
-    offset.value = currentOffset;
-  }
-
-  emit('scroll', e);
-};
-
-/**
- * 子项尺寸变化时更新高度映射
- */
-const onSizeChange = (index: number, height: number) => {
-  if (height > 0 && itemsHeightMap[index] !== height) {
-    itemsHeightMap[index] = height;
-  }
-};
-
-/**
- * 滚动到指定位置
- */
-const scrollToTop = () => {
-  scrollTopVal.value = scrollTop.value; // 先同步一次
-  nextTick(() => {
-    scrollTopVal.value = 0;
-    scrollTop.value = 0;
-  });
-};
-
-// 暴露 API 给外部使用
-defineExpose({
-  scrollToTop,
-  itemsHeightMap,
-});
-
-/**
- * 更新记录的最大宽度
- */
-const updateMaxWidth = () => {
-  if (!props.scrollX) return;
-  uni
-    .createSelectorQuery()
-    .in(instance)
-    .select('.virtual-list-measure-inner')
-    .boundingClientRect((res: any) => {
-      // 只有当检测到更大的宽度时才更新，实现“只增不减”
-      if (res && res.width > maxWidth.value) {
-        maxWidth.value = res.width;
-      }
-    })
-    .exec();
-};
-
-// 监听可见数据变化，更新最大宽度
-watch(visibleData, () => {
-  nextTick(() => {
-    updateMaxWidth();
-  });
-});
-
-// 数据变化处理
-watch(
-  () => props.data,
-  () => {
-    if (props.dataChangeScrollToTop) {
-      maxWidth.value = 0; // 只有在需要回到顶部（彻底换数据）时才重置宽度
-      scrollToTop();
-      // 数据重置时，立即更新内部索引，防止旧位置引起的白屏
-      startIndex.value = 0;
-      offset.value = 0;
-      scrollTop.value = 0;
-    }
-  },
-  { deep: false },
-);
-</script>
-
-<style scoped>
-.virtual-list-wrapper {
-  box-sizing: border-box;
-}
-
-.virtual-list-scroll {
-  width: 100%;
-  height: 100%;
-}
-
-.virtual-list-measure-inner {
-  /* width: max-content; */
-  min-width: 100%;
-}
-
-.virtual-back-top {
-  position: absolute;
-  bottom: 24px;
-  right: 24px;
-  width: 44px;
-  height: 44px;
-  background-color: var(--dev-tool-main-color, #9254de);
-  color: #fff;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-  font-size: 20px;
-  z-index: 1000;
-  cursor: pointer;
-  transition:
-    opacity 0.3s,
-    transform 0.2s;
-}
-
-.virtual-back-top:active {
-  transform: scale(0.9);
-}
-</style>
+<template>
+  <view :class="['virtual-list-wrapper', className]" :style="wrapperStyle">
+    <scroll-view
+      scroll-y
+      :scroll-x="scrollX && !isEdgeSwipe"
+      class="virtual-list-scroll"
+      :scroll-top="scrollTopVal"
+      :scroll-with-animation="scrollWithAnimation"
+      :scroll-into-view="scrollIntoView"
+      @scroll="handleScroll"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @mousedown="onMouseDown">
+      <!-- 滚动容器：统一负责撑开横向和纵向的滚动区域 -->
+      <view class="virtual-list-container" :style="containerStyle">
+        <!-- 实际渲染内容的列表块 -->
+        <view class="virtual-list-content" :style="contentStyle">
+          <view class="virtual-list-measure-inner">
+            <slot
+              :list="visibleData"
+              :startIndex="startIndex"
+              :start="startIndex"
+              :current="Math.floor(startIndex / props.pageSize) + 1"
+              :itemsHeight="itemsHeightMap"
+              :onSizeChange="onSizeChange"></slot>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 返回顶部按钮：移出 scroll-view，绝对定位在 wrapper 内部 -->
+    <view
+      :style="{ display: showBackTop && scrollTop > 200 ? 'flex' : 'none' }"
+      class="virtual-back-top"
+      @click="scrollToTop">
+      ↑
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  nextTick,
+  getCurrentInstance,
+  onMounted,
+} from 'vue';
+
+interface Props {
+  /** 渲染数据源 */
+  data: any[];
+  /** 容器高度 */
+  height?: number | string;
+  /** 每页渲染数量 (虚拟化块大小) */
+  pageSize?: number;
+  /** 预估的项高度 (用于初次计算) */
+  itemHeight?: number;
+  /** 额外的缓冲区数量 (防止滚动过快白屏) */
+  buffer?: number;
+  /** 自定义类名 */
+  className?: string;
+  /** 是否显示返回顶部 */
+  showBackTop?: boolean;
+  /** 数据更新时是否自动滚动到顶部 */
+  dataChangeScrollToTop?: boolean;
+  /** 预加载高度 (兼容 Pro) */
+  preLodeHeight?: number;
+  /** 默认当前页 (从 1 开始) */
+  defaultCurrent?: number;
+  /** 横向滚动 */
+  scrollX?: boolean;
+  /** 滚动动画 */
+  scrollWithAnimation?: boolean;
+  /** 滚动到指定元素 ID */
+  scrollIntoView?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: '100%',
+  pageSize: 20,
+  itemHeight: 50,
+  buffer: 5,
+  showBackTop: true,
+  dataChangeScrollToTop: true,
+  preLodeHeight: 100,
+  defaultCurrent: 1,
+  scrollX: false,
+  scrollWithAnimation: false,
+  scrollIntoView: '',
+});
+
+const emit = defineEmits(['scroll']);
+
+/** 定义插槽类型 */
+defineSlots<{
+  default(props: {
+    /** 当前可见数据列表 */
+    list: any[];
+    /** 起始索引 (绝对索引) */
+    startIndex: number;
+    /** 起始索引 (别名，同 startIndex) */
+    start: number;
+    /** 当前页码 (基于 startIndex 和 pageSize 计算) */
+    current: number;
+    /** 各项高度映射记录 */
+    itemsHeight: Record<number, number>;
+    /** 子项尺寸变化回调 */
+    onSizeChange: (index: number, height: number) => void;
+  }): any;
+}>();
+
+// --- 状态变量 ---
+const scrollTop = ref(0);
+const scrollTopVal = ref(0); // 用于控制转跳的响应式值
+const startIndex = ref(0);
+const itemsHeightMap = reactive<Record<number, number>>({}); // 存储每一项的实际高度
+
+const isEdgeSwipe = ref(false);
+const isCapturing = ref(false); // 是否由当前列表锁定捕获手势
+let containerRect = { left: 0, right: 0, width: 0 };
+
+const instance = getCurrentInstance();
+const maxWidth = ref(0);
+
+onMounted(() => {
+  // 获取容器位置和宽度，用于边缘检测
+  uni
+    .createSelectorQuery()
+    .in(instance)
+    .select('.virtual-list-wrapper')
+    .boundingClientRect((data: any) => {
+      if (data) {
+        containerRect = data;
+      }
+    })
+    .exec();
+});
+
+function onTouchStart(e: TouchEvent | MouseEvent) {
+  if (!props.scrollX) return;
+  const touch = (e as TouchEvent).touches
+    ? (e as TouchEvent).touches[0]
+    : (e as MouseEvent);
+  const x = touch.clientX;
+
+  // 如果从边缘 40px 内开始滑动，则视为侧滑切换 Tab，允许事件冒泡到父级
+  const threshold = 40;
+  if (
+    x < containerRect.left + threshold ||
+    x > containerRect.right - threshold
+  ) {
+    isEdgeSwipe.value = true;
+    isCapturing.value = false;
+  } else {
+    isEdgeSwipe.value = false;
+    isCapturing.value = true;
+    // 重要：锁定在此，阻止事件冒泡到 CustomSwiper
+    e.stopPropagation();
+  }
+}
+
+function onTouchMove(e: TouchEvent) {
+  if (isCapturing.value) {
+    // 已经锁定时，继续阻止冒泡，确保父级不会触发滑屏逻辑
+    e.stopPropagation();
+  }
+}
+
+function onTouchEnd(e: TouchEvent | MouseEvent) {
+  if (isCapturing.value) {
+    e.stopPropagation();
+  }
+  isCapturing.value = false;
+  isEdgeSwipe.value = false;
+}
+
+function onMouseDown(e: MouseEvent) {
+  onTouchStart(e);
+}
+
+// 根据 defaultCurrent 初始化位置
+if (props.defaultCurrent > 1) {
+  startIndex.value = Math.max(0, (props.defaultCurrent - 1) * props.pageSize);
+}
+const offset = ref(0);
+
+// 初始化 offset
+if (startIndex.value > 0) {
+  let initialOffset = 0;
+  for (let i = 0; i < startIndex.value; i++) {
+    initialOffset += itemsHeightMap[i] || props.itemHeight;
+  }
+  offset.value = initialOffset;
+}
+
+// --- 计算属性 ---
+// 外层容器样式
+const wrapperStyle = computed(
+  () =>
+    ({
+      height:
+        typeof props.height === 'number' ? `${props.height}px` : props.height,
+      position: 'relative' as const,
+      overflow: 'hidden' as const,
+    }) as any,
+);
+
+// 计算总高度：已测量的高度 + 未测量的默认高度
+const totalHeight = computed(() => {
+  let total = 0;
+  for (let i = 0; i < props.data.length; i++) {
+    total += itemsHeightMap[i] || props.itemHeight;
+  }
+  return total;
+});
+
+// 可见数据切片
+const visibleData = computed(() => {
+  // 我们多渲染一点，避免滚动白屏
+  const end = Math.min(
+    startIndex.value + props.pageSize + props.buffer,
+    props.data.length,
+  );
+  return props.data.slice(startIndex.value, end);
+});
+
+// 滚动容器样式 (撑开滚动区域的核心)
+const containerStyle = computed(() => {
+  const style: any = {
+    height: `${totalHeight.value}px`,
+    position: 'relative',
+    width: '100%',
+  };
+  if (props.scrollX) {
+    if (maxWidth.value) {
+      style.minWidth = `${maxWidth.value}px`;
+    }
+  }
+  return style;
+});
+
+// 内容块样式
+const contentStyle = computed(() => {
+  return {
+    transform: `translateY(${offset.value}px)`,
+    position: 'absolute' as const,
+    left: 0,
+    top: 0,
+    width: '100%',
+    // minWidth: 'max-content',
+  };
+});
+
+// --- 方法 ---
+
+/**
+ * 核心滚动处理函数
+ */
+const handleScroll = (e: any) => {
+  // Uni-app 环境下 e.detail.scrollTop 可能存在，标准 H5 下是 e.target.scrollTop
+  const st = e.detail?.scrollTop ?? e.target?.scrollTop ?? 0;
+  scrollTop.value = st;
+
+  // 根据当前滚动位置计算 startIndex
+  let accumulatedHeight = 0;
+  let index = -1;
+  const dataLen = props.data.length;
+
+  for (let i = 0; i < dataLen; i++) {
+    const h = itemsHeightMap[i] || props.itemHeight;
+    if (accumulatedHeight + h > st) {
+      index = i;
+      break;
+    }
+    accumulatedHeight += h;
+  }
+
+  // 修复核心：如果 st 很大，超过了所有项的高度和，或者刚好在最后，确保 index 不会回滚到 0
+  if (index === -1) {
+    index = dataLen > 0 ? dataLen - 1 : 0;
+  }
+
+  // 加上缓冲区处理
+  const targetIndex = Math.max(0, index - props.buffer);
+
+  // 更新状态
+  if (targetIndex !== startIndex.value) {
+    startIndex.value = targetIndex;
+
+    // 计算内容块的偏移量：即渲染起始项之前的全部高度
+    let currentOffset = 0;
+    for (let i = 0; i < targetIndex; i++) {
+      currentOffset += itemsHeightMap[i] || props.itemHeight;
+    }
+    offset.value = currentOffset;
+  }
+
+  emit('scroll', e);
+};
+
+/**
+ * 子项尺寸变化时更新高度映射
+ */
+const onSizeChange = (index: number, height: number) => {
+  if (height > 0 && itemsHeightMap[index] !== height) {
+    itemsHeightMap[index] = height;
+  }
+};
+
+/**
+ * 滚动到指定位置
+ */
+const scrollToTop = () => {
+  scrollTopVal.value = scrollTop.value; // 先同步一次
+  nextTick(() => {
+    scrollTopVal.value = 0;
+    scrollTop.value = 0;
+  });
+};
+
+// 暴露 API 给外部使用
+defineExpose({
+  scrollToTop,
+  itemsHeightMap,
+});
+
+/**
+ * 更新记录的最大宽度
+ */
+const updateMaxWidth = () => {
+  if (!props.scrollX) return;
+  uni
+    .createSelectorQuery()
+    .in(instance)
+    .select('.virtual-list-measure-inner')
+    .boundingClientRect((res: any) => {
+      // 只有当检测到更大的宽度时才更新，实现“只增不减”
+      if (res && res.width > maxWidth.value) {
+        maxWidth.value = res.width;
+      }
+    })
+    .exec();
+};
+
+// 监听可见数据变化，更新最大宽度
+watch(visibleData, () => {
+  nextTick(() => {
+    updateMaxWidth();
+  });
+});
+
+// 数据变化处理
+watch(
+  () => props.data,
+  () => {
+    if (props.dataChangeScrollToTop) {
+      maxWidth.value = 0; // 只有在需要回到顶部（彻底换数据）时才重置宽度
+      scrollToTop();
+      // 数据重置时，立即更新内部索引，防止旧位置引起的白屏
+      startIndex.value = 0;
+      offset.value = 0;
+      scrollTop.value = 0;
+    }
+  },
+  { deep: false },
+);
+</script>
+
+<style scoped>
+.virtual-list-wrapper {
+  box-sizing: border-box;
+}
+
+.virtual-list-scroll {
+  width: 100%;
+  height: 100%;
+}
+
+:deep(.virtual-list-scroll .uni-scroll-view .uni-scroll-view) {
+  overflow: auto !important;
+}
+
+.virtual-list-measure-inner {
+  /* width: max-content; */
+  min-width: 100%;
+}
+
+.virtual-back-top {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+  width: 44px;
+  height: 44px;
+  background-color: var(--dev-tool-main-color, #9254de);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  font-size: 20px;
+  z-index: 1000;
+  cursor: pointer;
+  transition:
+    opacity 0.3s,
+    transform 0.2s;
+}
+
+.virtual-back-top:active {
+  transform: scale(0.9);
+}
+</style>