Skip to content

Commit 7e87b18

Browse files
lhlyulhlyu
committed
feat: add enableCache parameter
1 parent 7668fef commit 7e87b18

File tree

7 files changed

+55
-27
lines changed

7 files changed

+55
-27
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 1.0.7
2+
3+
### feature
4+
5+
- add a `enableCache` parameter | 新增一个`enableCache`参数
6+
17
## 1.0.6
28

39
### chore

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ of the body also needs to be specified. The scrolling event can be bound to the
6262
|--------------------|--------------------------------------------|-----------------------------------------|---------------------------------------|
6363
| virtual | boolean | true | Enable virtual list |
6464
| rowKey | string | 'id' | Key for v-for |
65+
| enableCache | boolean | true | enable cache |
6566
| gap | number | 15 | Gap between each item |
6667
| padding | number or string | 15 or '15px 15px' | Container's padding |
6768
| preloadScreenCount | `[number, number]` | `[0, 0]` | Preload screen count `[above, below]` |

‎README.zh.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ app.use(VueVirtualWaterfall)
5151
### 注意!!!
5252

5353
**`VirtualWaterfall`
54-
组件想要实现虚拟列表，包裹它的容器必须指明固定的高度，滚动事件可以绑定在这个容器上，如果这个组件挂在到body下，同样需要指明body的高度，滚动事件可以绑定在`window`
54+
组件想要实现虚拟列表，包裹它的容器必须指明固定的高度，滚动事件可以绑定在这个容器上，如果这个组件挂在到body下，同样需要指明body的高度，滚动事件可以绑定在
55+
`window`
5556
上**
5657

5758
## 文档
@@ -62,6 +63,7 @@ app.use(VueVirtualWaterfall)
6263
|--------------------|--------------------------------------------|-----------------------------------------|---------------------------|
6364
| virtual | boolean | true | 是否启用虚拟列表 |
6465
| rowKey | string | 'id' | v-for需要用到key |
66+
| enableCache | boolean | true | 是否启用缓存 |
6567
| gap | number | 15 | 每个item之间的间隔 |
6668
| padding | number or string | 15 or '15px 15px' | 容器内边距 |
6769
| preloadScreenCount | `[number, number]` | `[0:0]` | 预加载屏数量`[上面预加载屏数，下面预加载屏数]` |

‎package.json

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@lhlyu/vue-virtual-waterfall",
33
"description": "vue3 virtual waterfall component",
4-
"version": "1.0.6",
4+
"version": "1.0.7-beta.1",
55
"author": "lhlyu",
66
"repository": {
77
"type": "git",
@@ -34,20 +34,20 @@
3434
"package.json"
3535
],
3636
"dependencies": {
37-
"@vueuse/core": "^11.0.3"
37+
"@vueuse/core": "^13.5.0"
3838
},
3939
"devDependencies": {
40-
"@vitejs/plugin-vue": "^5.1.3",
41-
"autoprefixer": "^10.4.20",
42-
"cssnano": "^7.0.5",
43-
"postcss": "^8.4.44",
44-
"prettier": "^3.3.3",
40+
"@vitejs/plugin-vue": "^6.0.0",
41+
"autoprefixer": "^10.4.21",
42+
"cssnano": "^7.1.0",
43+
"postcss": "^8.5.6",
44+
"prettier": "^3.6.2",
4545
"prettier-plugin-rational-order": "^1.0.3",
46-
"sass": "^1.78.0",
47-
"typescript": "^5.5.4",
48-
"vite": "^5.4.3",
49-
"vite-plugin-dts": "4.1.0",
50-
"vue": "^3.5.0",
51-
"vue-tsc": "^2.1.4"
46+
"sass": "^1.89.2",
47+
"typescript": "^5.8.3",
48+
"vite": "^7.0.5",
49+
"vite-plugin-dts": "4.5.4",
50+
"vue": "^3.5.17",
51+
"vue-tsc": "^3.0.3"
5252
}
5353
}

‎src/example/Example.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<VirtualWaterfall
99
:virtual="waterfallOption.virtual"
1010
:gap="waterfallOption.gap"
11+
:enable-cache="waterfallOption.enableCache"
1112
:padding="waterfallOption.padding"
1213
:preload-screen-count="[waterfallOption.topPreloadScreenCount, waterfallOption.bottomPreloadScreenCount]"
1314
:item-min-width="waterfallOption.itemMinWidth"
@@ -162,6 +163,14 @@
162163
v-model="waterfallOption.virtual"
163164
/>
164165
</div>
166+
<div class="form-group form-group-sm form-check form-switch mb-1">
167+
<label class="form-label fs-6">开启列表缓存</label>
168+
<input
169+
class="form-check-input"
170+
type="checkbox"
171+
v-model="waterfallOption.enableCache"
172+
/>
173+
</div>
165174
<div class="form-group form-group-sm form-check form-switch mb-2">
166175
<label class="form-label fs-6">仅展示图片</label>
167176
<input

‎src/example/useWaterfall.ts

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
1-
import { reactive, render, h, onMounted } from 'vue'
1+
import { reactive, render, h, onMounted, onUnmounted } from 'vue'
22
import Card from './Card.vue'
33

4+
// 创建一个可复用的 DOM 容器
5+
let measureDom: HTMLDivElement;
6+
47
// 计算真实高度，这里只计算除了图片的高度
58
function getRealHeight(item: ItemOption, realWidth: number) {
6-
const dom = document.createElement('div')
79

810
render(
911
h(Card, {
1012
item: item,
1113
width: realWidth + 'px',
1214
noImage: true
1315
}),
14-
dom
16+
measureDom
1517
)
1618

17-
document.body.appendChild(dom)
18-
1919
// 获取高度
20-
const height: number = dom.firstElementChild.clientHeight
21-
22-
// 移除新容器
23-
document.body.removeChild(dom)
20+
const height: number = measureDom.firstElementChild!.clientHeight
2421
// 返回高度
2522
return height
2623
}
@@ -42,6 +39,7 @@ const useWaterfall = () => {
4239
topPreloadScreenCount: 0,
4340
bottomPreloadScreenCount: 0,
4441
virtual: true,
42+
enableCache: true,
4543
gap: 15,
4644
padding: 15,
4745
itemMinWidth: 220,
@@ -110,9 +108,16 @@ const useWaterfall = () => {
110108
}
111109

112110
onMounted(async () => {
111+
measureDom = document.createElement('div');
112+
// 将其设置为不可见，避免影响布局或用户体验
113+
measureDom.style.cssText = 'position: absolute; visibility: hidden; pointer-events: none;';
114+
document.body.appendChild(measureDom); // 在应用启动时添加到 body 一次
113115
await checkScrollPosition()
114116
})
115117

118+
onUnmounted(() => {
119+
document.body.removeChild(measureDom);
120+
})
116121
return {
117122
backTop,
118123
waterfallOption,

‎src/vue-virtual-waterfall/virtual-waterfall.vue

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ interface VirtualWaterfallOption {
4141
// 是否启用虚拟列表
4242
virtual?: boolean
4343
rowKey?: string
44+
// 是否启用缓存, 默认启用
45+
enableCache?: boolean
4446
// item间隔
4547
gap?: number
4648
// 容器内边距
@@ -62,6 +64,7 @@ interface VirtualWaterfallOption {
6264
const props = withDefaults(defineProps<VirtualWaterfallOption>(), {
6365
virtual: true,
6466
rowKey: 'id',
67+
enableCache: true,
6568
gap: 15,
6669
padding: 15,
6770
preloadScreenCount: () => [0, 0],
@@ -137,17 +140,19 @@ interface SpaceOption {
137140
const itemSpaces = shallowRef<SpaceOption[]>([])
138141
139142
watchEffect(() => {
140-
if (!columnCount.value) {
143+
144+
const length = props.items.length
145+
146+
if (!columnCount.value || !length) {
141147
itemSpaces.value = []
142148
return
143149
}
144-
145-
const length = props.items.length
150+
146151
const spaces = new Array(length)
147152
148153
let start = 0
149154
// 是否启用缓存：只有当新增元素时，需要计算新增元素的信息
150-
const cache = itemSpaces.value.length && length > itemSpaces.value.length
155+
const cache = props.enableCache && itemSpaces.value.length && length > itemSpaces.value.length
151156
if (cache) {
152157
start = itemSpaces.value.length
153158
} else {

0 commit comments

Comments
 (0)