diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 865f35a..c0525f8 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -3,7 +3,7 @@ name: Publish Package on: push: branches: - - dev + - main jobs: publish: diff --git a/CHANGELOG.md b/CHANGELOG.md index 5654ef8..a0b85dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 1.0.3 + +### feature + +- add a `padding` parameter | 新增一个`padding`参数 + ## 1.0.2 ### fix diff --git a/README.md b/README.md index a46aecd..5a8a646 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ - Local import ```ts -import {VirtualWaterfall} from '@lhlyu/vue-virtual-waterfall' +import { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall' ``` - Global import @@ -34,13 +34,13 @@ app.use(VueVirtualWaterfall) ```vue ``` @@ -50,7 +50,9 @@ app.use(VueVirtualWaterfall) ### Attention!!! -**The `VirtualWaterfall` component wants to implement a virtual list, and the container that wraps it must indicate a fixed height. The scrolling event can be bound to this container. If this component is hung under the body, the height of the body also needs to be specified. The scrolling event can be bound to the `window`** +**The `VirtualWaterfall` component wants to implement a virtual list, and the container that wraps it must indicate a +fixed height. The scrolling event can be bound to this container. If this component is hung under the body, the height +of the body also needs to be specified. The scrolling event can be bound to the `window`** ## Documentation @@ -61,6 +63,7 @@ app.use(VueVirtualWaterfall) | virtual | boolean | true | Enable virtual list | | rowKey | string | 'id' | Key for v-for | | gap | number | 15 | Gap between each item | +| padding | number | 15 | Container's padding | | preloadScreenCount | `[number, number]` | `[0, 0]` | Preload screen count `[above, below]` | | itemMinWidth | number | 220 | Minimum width for each item | | maxColumnCount | number | 10 | Maximum number of columns | diff --git a/README.zh.md b/README.zh.md index e1beefb..f095fde 100644 --- a/README.zh.md +++ b/README.zh.md @@ -18,7 +18,7 @@ - 局部引用 ```ts -import {VirtualWaterfall} from '@lhlyu/vue-virtual-waterfall' +import { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall' ``` - 全局引用 @@ -34,13 +34,13 @@ app.use(VueVirtualWaterfall) ```vue ``` @@ -50,7 +50,9 @@ app.use(VueVirtualWaterfall) ### 注意!!! -**`VirtualWaterfall`组件想要实现虚拟列表，包裹它的容器必须指明固定的高度，滚动事件可以绑定在这个容器上，如果这个组件挂在到body下，同样需要指明body的高度，滚动事件可以绑定在`window`上** +**`VirtualWaterfall` +组件想要实现虚拟列表，包裹它的容器必须指明固定的高度，滚动事件可以绑定在这个容器上，如果这个组件挂在到body下，同样需要指明body的高度，滚动事件可以绑定在`window` +上** ## 文档 @@ -61,6 +63,7 @@ app.use(VueVirtualWaterfall) | virtual | boolean | true | 是否启用虚拟列表 | | rowKey | string | 'id' | v-for需要用到key | | gap | number | 15 | 每个item之间的间隔 | +| padding | number | 15 | 容器内边距 | | preloadScreenCount | `[number, number]` | `[0:0]` | 预加载屏数量`[上面预加载屏数，下面预加载屏数]` | | itemMinWidth | number | 220 | 每个item最小宽度 | | maxColumnCount | number | 10 | 允许的最大列数 | diff --git a/package.json b/package.json index 6e07a9e..59c14b9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@lhlyu/vue-virtual-waterfall", "description": "vue3 virtual waterfall component", - "version": "1.0.2", + "version": "1.0.3", "author": "lhlyu", "repository": { "type": "git", @@ -34,20 +34,20 @@ "package.json" ], "dependencies": { - "@vueuse/core": "^10.7.1" + "@vueuse/core": "^10.9.0" }, "devDependencies": { - "@vitejs/plugin-vue": "^5.0.3", - "autoprefixer": "^10.4.16", - "cssnano": "^6.0.3", - "postcss": "^8.4.33", - "prettier": "^3.2.1", + "@vitejs/plugin-vue": "^5.0.4", + "autoprefixer": "^10.4.19", + "cssnano": "^6.1.1", + "postcss": "^8.4.38", + "prettier": "^3.2.5", "prettier-plugin-rational-order": "^1.0.3", - "sass": "^1.69.7", - "typescript": "^5.3.3", - "vite": "^5.0.11", - "vite-plugin-dts": "^3.7.0", - "vue": "^3.4.13", - "vue-tsc": "^1.8.27" + "sass": "^1.72.0", + "typescript": "^5.4.3", + "vite": "^5.2.4", + "vite-plugin-dts": "^3.7.3", + "vue": "^3.4.21", + "vue-tsc": "^2.0.7" } } diff --git a/src/example/Example.vue b/src/example/Example.vue index eb1f9f1..3a6d0c7 100644 --- a/src/example/Example.vue +++ b/src/example/Example.vue @@ -3,6 +3,7 @@ +
+ +
+ + + px + +
+
diff --git a/src/example/useWaterfall.ts b/src/example/useWaterfall.ts index af92855..6ac1217 100644 --- a/src/example/useWaterfall.ts +++ b/src/example/useWaterfall.ts @@ -60,6 +60,7 @@ const useWaterfall = () => { bottomPreloadScreenCount: 0, virtual: true, gap: 15, + padding: 15, itemMinWidth: 220, minColumnCount: 2, maxColumnCount: 10 diff --git a/src/vue-virtual-waterfall/virtual-waterfall.vue b/src/vue-virtual-waterfall/virtual-waterfall.vue index 67a92ec..9de2504 100644 --- a/src/vue-virtual-waterfall/virtual-waterfall.vue +++ b/src/vue-virtual-waterfall/virtual-waterfall.vue @@ -4,7 +4,8 @@ :style="{ position: 'relative', willChange: 'height', - height: `${Math.max(...columnsTop)}px` + height: `${Math.max(...columnsTop)}px`, + padding: `${padding}px` }" >
(), { virtual: true, rowKey: 'id', gap: 15, + padding: 15, preloadScreenCount: () => [0, 0], itemMinWidth: 220, maxColumnCount: 10, @@ -90,7 +94,7 @@ const columnCount = computed(() => { if (!contentWidth.value) { return 0 } - const cWidth = contentWidth.value - props.gap * 2 + const cWidth = contentWidth.value if (cWidth >= props.itemMinWidth * 2) { const count = Math.floor(cWidth / props.itemMinWidth) if (props.maxColumnCount && count > props.maxColumnCount) { @@ -102,16 +106,17 @@ const columnCount = computed(() => { }) // 每列距离顶部的距离 -const columnsTop = ref(new Array(columnCount.value).fill(props.gap)) +const columnsTop = ref(new Array(columnCount.value).fill(0)) // 计算每个item占据的宽度: (容器宽度 - 间隔) / 列数 const itemWidth = computed(() => { if (!contentWidth.value || columnCount.value <= 0) { return 0 } - // 列之间的间隔 和 左右两侧的间隔 - const gap = (columnCount.value - 1) * props.gap + props.gap * 2 - return Math.floor((contentWidth.value - gap) / columnCount.value) + // 列之间的间隔 + const gap = (columnCount.value - 1) * props.gap + + return Math.ceil((contentWidth.value - gap) / columnCount.value) }) interface SpaceOption { @@ -142,7 +147,7 @@ watchEffect(() => { if (cache) { start = itemSpaces.value.length } else { - columnsTop.value = new Array(columnCount.value).fill(props.gap) + columnsTop.value = new Array(columnCount.value).fill(0) } // 为了高性能采用for-i @@ -156,12 +161,14 @@ watchEffect(() => { // 计算元素的高度 const h = props.calcItemHeight(props.items[i], itemWidth.value) const top = columnsTop.value[columnIndex] + const left = (itemWidth.value + props.gap) * columnIndex + const space: SpaceOption = { index: i, item: props.items[i], column: columnIndex, top: top, - left: (itemWidth.value + props.gap) * columnIndex + props.gap, + left: left, bottom: top + h, height: h }