im-ui-mobile 0.0.98 → 0.0.99

package/components/im-virtual-list/im-virtual-list.vue

@@ -1,32 +1,44 @@
 <template>
     <!-- 虚拟列表容器 -->
-    <scroll-view class="im-virtual-list" :scroll-y="true" :scroll-with-animation="true" :show-scrollbar="false"
+    <scroll-view class="virtual-list" :scroll-y="true" :scroll-with-animation="true" :show-scrollbar="false"
         :enhanced="true" :bounces="false" :lower-threshold="lowerThreshold" :upper-threshold="upperThreshold"
         :scroll-top="scrollTop" :scroll-into-view="scrollIntoViewId" @scroll="handleScroll"
         @scrolltolower="handleScrollToLower" @scrolltoupper="handleScrollToUpper">
         <!-- 顶部加载区域 -->
         <view v-if="showTopLoading" class="list-loading loading-top">
-            <text v-if="topStatus === 'loading'">加载中...</text>
-            <text v-if="topStatus === 'no-more'">没有更多了</text>
-            <text v-if="topStatus === 'error'">加载失败，点击重试</text>
+            <slot name="topLoading" v-if="topStatus === 'loading'">
+                <im-loading :size="50" :mask="false">
+                    <view>加载中...</view>
+                </im-loading>
+            </slot>
+            <slot name="topNoMore" v-if="topStatus === 'no-more'">
+                <view>没有更多了</view>
+            </slot>
+            <slot name="topError" v-if="topStatus === 'error'">
+                <view>加载失败，点击重试</view>
+            </slot>
         </view>
 
-        <!-- 虚拟内容占位器，用于撑开高度 -->
-        <view class="list-placeholder" :style="{ height: `${totalHeight}px` }"></view>
-
         <!-- 实际渲染的列表项 -->
-        <view class="list-items-container" :style="{ transform: `translateY(${startOffset}px)` }">
-            <view v-for="item in visibleItems" :key="getItemKey(item)" :id="getItemId(item)" class="list-item"
-                :style="getItemStyle(item)" @click="handleItemClick(item)" @longpress="handleItemLongPress(item)">
-                <slot :item="item" :index="getItemIndex(item)"></slot>
-            </view>
+        <view v-for="item in visibleItems" :key="getItemKey(item)" :id="getItemId(item)" @click="handleItemClick(item)"
+            @longpress="handleItemLongPress(item)">
+            <slot :item="item.data" :index="getItemIndex(item)"></slot>
         </view>
 
         <!-- 底部加载区域 -->
+        <view v-if="showBottomLoading" class="list-placeholder" style="min-height: calc(100vh - 400rpx) ;"></view>
         <view v-if="showBottomLoading" class="list-loading loading-bottom">
-            <text v-if="bottomStatus === 'loading'">加载中...</text>
-            <text v-if="bottomStatus === 'no-more'">没有更多了</text>
-            <text v-if="bottomStatus === 'error'">加载失败，点击重试</text>
+            <slot name="bottomLoading" v-if="bottomStatus === 'loading'">
+                <im-loading :size="50" :mask="false">
+                    <view>加载中...</view>
+                </im-loading>
+            </slot>
+            <slot name="bottomNoMore" v-if="bottomStatus === 'no-more'">
+                <view>没有更多了</view>
+            </slot>
+            <slot name="bottomError" v-if="bottomStatus === 'error'">
+                <view>加载失败，点击重试</view>
+            </slot>
         </view>
 
         <!-- 回到顶部按钮 -->
@@ -47,6 +59,8 @@ export interface VirtualListItem<T = any> {
     offset: number
 }
 
+export type LoadingStatus = 'loading' | 'no-more' | 'error' | 'idle'
+
 export interface ScrollEvent {
     detail: {
         scrollTop: number
@@ -58,8 +72,6 @@ export interface ScrollEvent {
     }
 }
 
-export type LoadingStatus = 'loading' | 'no-more' | 'error' | 'idle'
-
 // Props 定义
 interface Props<T = any> {
     /** 数据源 */
@@ -102,8 +114,8 @@ const props = withDefaults(defineProps<Props>(), {
     buffer: 5,
     height: '100%',
     keyField: 'id',
-    showTopLoading: true,
-    showBottomLoading: true,
+    showTopLoading: false,
+    showBottomLoading: false,
     topStatus: 'idle',
     bottomStatus: 'idle',
     lowerThreshold: 50,
@@ -260,7 +272,6 @@ const scrollToItem = (index: number, options: {
 // 获取项目高度（可扩展为动态高度）
 const getItemHeight = (item: any, index: number): number => {
     // 这里可以根据实际需求实现动态高度计算
-    // 例如从缓存中获取或使用预估高度
     return props.estimatedItemSize
 }
 
@@ -278,7 +289,7 @@ const getItemId = (item: VirtualListItem): string => {
 const getItemStyle = (item: VirtualListItem) => {
     return {
         height: `${item.height}px`,
-        'box-sizing': 'border-box'
+        boxSizing: 'border-box' as any
     }
 }
 
@@ -301,7 +312,7 @@ const clearScrollTimer = () => {
 const measureContainer = () => {
     nextTick(() => {
         const query = uni.createSelectorQuery().in(getCurrentInstance())
-        query.select('.im-virtual-list').boundingClientRect((rect: any) => {
+        query.select('.virtual-list').boundingClientRect((rect: any) => {
             if (rect && rect.height) {
                 containerHeight.value = rect.height
             }
@@ -367,43 +378,33 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.im-virtual-list {
-    position: relative;
-    height: v-bind('typeof height === "number" ? `${height}px` : height');
-    overflow: hidden;
+.virtual-list {
+    // min-height: 200rpx;
+    // height: 100vh;
 }
 
 .list-placeholder {
     pointer-events: none;
 }
 
-.list-items-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    will-change: transform;
-}
-
-.list-item {
-    width: 100%;
-    overflow: hidden;
-}
-
 .list-loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 80rpx;
-    font-size: 28rpx;
-    color: #909399;
+    // height: 100%;
+    color: $im-text-color-lighter;
+    text-align: center;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+    // height: 80rpx;
+    // font-size: 28rpx;
+    // color: #909399;
+    // border: solid 1px red;
 
     &.loading-top {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 10;
+        // position: absolute;
+        // top: 0;
+        // left: 0;
+        // right: 0;
+        // z-index: 10;
     }
 
     &.loading-bottom {