0.0.14

lhlyu · Nov 18, 2023 · 9d512c3 · 9d512c3
1 parent 8c5a647
commit 9d512c3
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 73 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -11,7 +11,7 @@ jobs:
     environment: Release
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
@@ -22,7 +22,7 @@ jobs:
         run: pnpm i --no-frozen-lockfile --shamefully-hoist
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           registry-url: 'https://registry.npmjs.org/'

diff --git a/.prettierignore b/.prettierignore
@@ -4,6 +4,7 @@
 *.toal
 *.ini
 *.html
+*.md
 .idea
 node_modules
 test

diff --git a/.prettierrc.json b/.prettierrc.json
@@ -4,10 +4,12 @@
   "semi": false,
   "singleQuote": true,
   "bracketSpacing": true,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "printWidth": 320,
   "trailingComma": "none",
   "arrowParens": "avoid",
+  "vueIndentScriptAndStyle": false,
+  "singleAttributePerLine": false,
   "plugins": [
     "prettier-plugin-rational-order"
   ]

diff --git a/README.md b/README.md
@@ -46,37 +46,38 @@ app.use(VueVirtualWaterfall)
 
 - Properties
 
-| Field              | Type                                     | Default Value                         | Description                                     |
-|--------------------|------------------------------------------|---------------------------------------|-------------------------------------------------|
-| rowKey             | string                                   | 'id'                                  | Key used for v-for loop                         |
-| gap                | number                                   | 15                                    | Gap between each item                           |
-| contentMaxWidth    | string or number                         | '100%'                                | Maximum width of the content                    |
-| preloadScreenCount | number                                   | 1                                     | Number of screens to preload                    |
-| bottomDistance     | number                                   | 2000                                  | Distance from bottom to trigger load more event |
-| itemMinWidth       | number                                   | 250                                   | Minimum width of each item                      |
-| maxColumnCount     | number                                   |                                       | Maximum number of columns, no limit by default  |
-| minColumnCount     | number                                   | 2                                     | Minimum number of columns                       |
-| loading            | boolean                                  | false                                 | Whether data is loading                         |
-| items              | any[]                                    | []                                    | Data                                            |
-| calcItemHeight     | (item: any, itemWidth: number) => number | (item: any, itemWidth: number) => 250 | Method to calculate item height                 |
+| Field              | Type                                       | Default Value                           | Description                                     |
+|--------------------|--------------------------------------------|-----------------------------------------|-------------------------------------------------|
+| height             | string                                     | '100vh'                                 | Container height                                |
+| rowKey             | string                                     | 'id'                                    | Key used for v-for loop                         |
+| gap                | number                                     | 15                                      | Gap between each item                           |
+| contentMaxWidth    | string or number                           | '100%'                                  | Maximum width of the content                    |
+| preloadScreenCount | number                                     | 1                                       | Number of screens to preload                    |
+| bottomDistance     | number                                     | 250                                     | Distance from bottom to trigger load more event |
+| itemMinWidth       | number                                     | 250                                     | Minimum width of each item                      |
+| maxColumnCount     | number                                     |                                         | Maximum number of columns, no limit by default  |
+| minColumnCount     | number                                     | 2                                       | Minimum number of columns                       |
+| loading            | boolean                                    | false                                   | Whether data is loading                         |
+| items              | any[]                                      | []                                      | Data                                            |
+| calcItemHeight     | `(item: any, itemWidth: number) => number` | `(item: any, itemWidth: number) => 250` | Method to calculate item height                 |
 
 - Slots
 
-| Name    | Type                         | Description        |
-|---------|------------------------------|--------------------|
-| default | { item: any, index: number } | Customized content |
+| Name    | Type                           | Description        |
+|---------|--------------------------------|--------------------|
+| default | `{ item: any, index: number }` | Customized content |
 
 - Events
 
-| Event     | Type       | Description     |
-|-----------|------------|-----------------|
-| load-more | () => void | Load more event |
+| Event     | Type         | Description     |
+|-----------|--------------|-----------------|
+| load-more | `() => void` | Load more event |
 
 - Exposed Methods
 
-| Method  | Type       | Description   |
-|---------|------------|---------------|
-| backTop | () => void | Scroll to top |
+| Method  | Type         | Description   |
+|---------|--------------|---------------|
+| backTop | `() => void` | Scroll to top |
 
 ## Performance
 
@@ -91,5 +92,8 @@ app.use(VueVirtualWaterfall)
 - [vue-masonry-css](https://github.com/paulcollett/vue-masonry-css)
 - [Optimization of Waterfall Virtual List](https://juejin.cn/post/7166071557284954142)
 - [PixivCollection](https://github.com/orilights/PixivCollection)
+- [v3-waterfall](https://github.com/gk-shi/v3-waterfall)
+- [scroll](https://juejin.cn/post/6844903493677875214?from=search-suggest)
+- [scroll-event](https://ayase.moe/2018/11/20/scroll-event/)
 
 - [Cache Settings](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=lr)
diff --git a/README.zh.md b/README.zh.md
@@ -46,37 +46,38 @@ app.use(VueVirtualWaterfall)
 
 - 属性
 
-| 字段                 | 类型                                       | 默认值                                   | 说明              |
-|--------------------|------------------------------------------|---------------------------------------|-----------------|
-| rowKey             | string                                   | 'id'                                  | v-for需要用到key    |
-| gap                | number                                   | 15                                    | 每个item之间的间隔     |
-| contentMaxWidth    | string or number                         | '100%'                                | 内容最大宽度          |
-| preloadScreenCount | number                                   | 1                                     | 预加载屏数量          |
-| bottomDistance     | number                                   | 2000                                  | 距离底部多少时触发加载更多事件 |
-| itemMinWidth       | number                                   | 250                                   | 每个item最小宽度      |
-| maxColumnCount     | number                                   |                                       | 允许的最大列数，默认没有限制  |
-| minColumnCount     | number                                   | 2                                     | 允许的最小列数         |
-| loading            | boolean                                  | false                                 | 是否正在加载数据        |
-| items              | any[]                                    | []                                    | 数据              |
-| calcItemHeight     | (item: any, itemWidth: number) => number | (item: any, itemWidth: number) => 250 | 计算item高度的方法     |
+| 字段                 | 类型                                         | 默认值                                     | 说明              |
+|--------------------|--------------------------------------------|-----------------------------------------|-----------------|
+| height             | string                                     | '100vh'                                 | 容器的高度           |
+| rowKey             | string                                     | 'id'                                    | v-for需要用到key    |
+| gap                | number                                     | 15                                      | 每个item之间的间隔     |
+| contentMaxWidth    | string or number                           | '100%'                                  | 内容最大宽度          |
+| preloadScreenCount | number                                     | 1                                       | 预加载屏数量          |
+| bottomDistance     | number                                     | 250                                     | 距离底部多少时触发加载更多事件 |
+| itemMinWidth       | number                                     | 250                                     | 每个item最小宽度      |
+| maxColumnCount     | number                                     |                                         | 允许的最大列数，默认没有限制  |
+| minColumnCount     | number                                     | 2                                       | 允许的最小列数         |
+| loading            | boolean                                    | false                                   | 是否正在加载数据        |
+| items              | any[]                                      | []                                      | 数据              |
+| calcItemHeight     | `(item: any, itemWidth: number) => number` | `(item: any, itemWidth: number) => 250` | 计算item高度的方法     |
 
 - 插槽
 
-| 事件      | 类型                           | 说明      |
-|---------|------------------------------|---------|
-| default | { item: any, index: number } | 自定义默认内容 |
+| 事件      | 类型                             | 说明      |
+|---------|--------------------------------|---------|
+| default | `{ item: any, index: number }` | 自定义默认内容 |
 
 - 事件
 
-| 事件        | 类型         | 说明   |
-|-----------|------------|------|
-| load-more | () => void | 加载更多 |
+| 事件        | 类型           | 说明   |
+|-----------|--------------|------|
+| load-more | `() => void` | 加载更多 |
 
 - 暴露的方法
 
-| 方法      | 类型         | 说明    |
-|---------|------------|-------|
-| backTop | () => void | 滚动到顶部 |
+| 方法      | 类型           | 说明    |
+|---------|--------------|-------|
+| backTop | `() => void` | 滚动到顶部 |
 
 ## 性能
 
@@ -91,5 +92,7 @@ app.use(VueVirtualWaterfall)
 - [vue-masonry-css](https://github.com/paulcollett/vue-masonry-css)
 - [瀑布流虚拟列表优化](https://juejin.cn/post/7166071557284954142)
 - [PixivCollection](https://github.com/orilights/PixivCollection)
-
+- [v3-waterfall](https://github.com/gk-shi/v3-waterfall)
+- [滚动优化](https://juejin.cn/post/6844903493677875214?from=search-suggest)
+- [scroll-event](https://ayase.moe/2018/11/20/scroll-event/)
 - [缓存设置](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=lr)
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "0.0.13",
+  "version": "0.0.14-beta.0",
   "author": "lhlyu",
   "repository": {
     "type": "git",
@@ -33,27 +33,27 @@
     "package.json"
   ],
   "dependencies": {
-    "@vueuse/core": "^10.5.0",
-    "vue": "^3.3.7"
+    "@vueuse/core": "^10.6.1"
   },
   "devDependencies": {
-    "@arco-design/web-vue": "^2.52.1",
-    "@types/mockjs": "^1.0.9",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@arco-design/web-vue": "^2.53.2",
+    "@types/mockjs": "^1.0.10",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.16",
     "cssnano": "^6.0.1",
     "mockjs": "^1.1.0",
     "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "prettier-plugin-rational-order": "^1.0.3",
     "sass": "^1.69.5",
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.16.7",
     "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.5.0",
+    "vite": "^5.0.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",
-    "vite-plugin-dts": "^3.6.2",
+    "vite-plugin-dts": "^3.6.3",
+    "vue": "^3.3.8",
     "vue-tsc": "^1.8.22"
   }
 }
diff --git a/src/example.vue b/src/example.vue
@@ -28,7 +28,7 @@ interface ItemOption {
 const data = reactive({
     items: [] as ItemOption[],
     page: 1,
-    size: 80,
+    size: 50,
     loading: false
 })
 
@@ -66,7 +66,7 @@ const calcItemHeight = (item: ItemOption, itemWidth: number): number => {
     let height = 0
     // 如果存在文本则添加一点高度
     if (item.text.length && cfg.showText) {
-        height = 100
+        height = 150
     }
     // 按比例
     switch (cfg.itemHeight) {

diff --git a/src/vue-virtual-waterfall/index.ts b/src/vue-virtual-waterfall/index.ts
@@ -9,6 +9,7 @@ export default {
     }
 }
 
+// 全局引入时，需要声明一下全局组件，不然没有提示
 declare module 'vue' {
     export interface GlobalComponents {
         VirtualWaterfall: typeof VirtualWaterfall

diff --git a/src/vue-virtual-waterfall/virtual-waterfall.vue b/src/vue-virtual-waterfall/virtual-waterfall.vue
@@ -1,14 +1,18 @@
 <template>
-    <div ref="container" class="container">
+    <div
+        ref="container"
+        class="container"
+        :style="{
+            height: height
+        }">
         <div
             ref="content"
             class="content"
             :style="{
                 maxWidth: `${getValue(contentMaxWidth, '100%')}`,
                 height: `${Math.max(...columnsTop) + props.gap}px`,
                 padding: `${gap}px`
-            }"
-        >
+            }">
             <div
                 class="box"
                 v-for="(data, index) in itemRenderList"
@@ -18,23 +22,24 @@
                     height: `${data.height}px`,
                     transform: `translate(${data.left}px, ${data.top}px)`,
                     containIntrinsicSize: `${itemWidth}px ${data.height}px`
-                }"
-            >
+                }">
                 <slot :item="data.item" :index="index"></slot>
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import {computed, onMounted, ref, watchEffect} from 'vue'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useElementBounding, useThrottle, useElementSize, useInfiniteScroll } from '@vueuse/core'
 
 defineOptions({
     name: 'VirtualWaterfall'
 })
 
 interface VirtualWaterfallOption {
+    // 容器的高度
+    height?: string
     rowKey?: string
     // item间隔
     gap?: number
@@ -59,10 +64,11 @@ interface VirtualWaterfallOption {
 }
 
 const props = withDefaults(defineProps<VirtualWaterfallOption>(), {
+    height: '100vh',
     rowKey: 'id',
     gap: 15,
     preloadScreenCount: 1,
-    bottomDistance: 2000,
+    bottomDistance: 250,
     contentMaxWidth: '100%',
     itemMinWidth: 250,
     minColumnCount: 2,
@@ -99,7 +105,7 @@ useInfiniteScroll(
         }
         emit('load-more')
     },
-    { distance: props.bottomDistance }
+    { distance: props.bottomDistance, direction: 'bottom' }
 )
 
 const content = ref<HTMLDivElement>()
@@ -180,18 +186,18 @@ watchEffect(() => {
 
         const columnIndex = getColumnIndex()
         // 计算元素的高度
-        const height = props.calcItemHeight(props.items[i], itemWidth.value)
+        const h = props.calcItemHeight(props.items[i], itemWidth.value)
 
         const space: SpaceOption = {
             item: props.items[i],
             column: columnIndex,
             top: columnsTop.value[columnIndex],
             left: (itemWidth.value + props.gap) * columnIndex,
-            height: height
+            height: h
         }
 
         // 累加当前列的高度
-        columnsTop.value[columnIndex] += height + props.gap
+        columnsTop.value[columnIndex] += h + props.gap
         spaces[i] = space
     }
     itemSpaces.value = spaces
@@ -238,9 +244,10 @@ defineExpose({
 
 <style lang="scss" scoped>
 .container {
+    box-sizing: border-box;
     width: 100%;
-    height: 100%;
-    overflow: auto;
+    overflow-y: auto;
+    visibility: visible;
     scrollbar-width: none;
     -ms-overflow-style: none;