0.0.15

.github/workflows/publish.yml

@@ -3,7 +3,7 @@ name: Publish Package
 on:
   push:
     branches:
-      - dev
+      - main
 
 jobs:
   publish:

README.md

@@ -95,5 +95,5 @@ app.use(VueVirtualWaterfall)
 - [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/)
-
+- [rolling optimization](https://www.cnblogs.com/coco1s/p/5499469.html)
 - [Cache Settings](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=lr)

README.zh.md

@@ -95,4 +95,5 @@ app.use(VueVirtualWaterfall)
 - [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://www.cnblogs.com/coco1s/p/5499469.html)
 - [缓存设置](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=lr)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "author": "lhlyu",
   "repository": {
     "type": "git",
@@ -44,7 +44,7 @@
     "@opentiny/vue-split": "^3.11.0",
     "@opentiny/vue-switch": "^3.11.0",
     "@types/mockjs": "^1.0.10",
-    "@types/node": "^20.9.2",
+    "@types/node": "^20.9.4",
     "@vitejs/plugin-vue": "^4.5.0",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.16",
@@ -54,8 +54,8 @@
     "prettier": "^3.1.0",
     "prettier-plugin-rational-order": "^1.0.3",
     "sass": "^1.69.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-dts": "^3.6.3",
     "vue": "^3.3.8",

src/App.vue

@@ -13,5 +13,6 @@ body {
     margin: 0;
     padding: 0;
     background: #f1f2f6;
+    user-select: none;
 }
 </style>

src/example/Card.vue

@@ -136,7 +136,7 @@ onBeforeMount(() => {
 .v-enter-active,
 .v-leave-active {
     opacity: 1;
-    transition: all 1s ease-in-out;
+    transition: all 0.8s linear;
     will-change: opacity;
 }
 

src/example/useSplit.ts

@@ -26,7 +26,7 @@ const useSplit = () => {
     })
 
     onUnmounted(() => {
-        window.removeEventListener('resize', useDebounceFn(calcAppWidth, 200))
+        window.removeEventListener('resize', useDebounceFn(calcAppWidth, 125))
     })
 
     return {

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

@@ -111,7 +111,7 @@ useInfiniteScroll(
 const content = ref<HTMLDivElement>()
 const { width } = useElementSize(content)
 const { top } = useElementBounding(content)
-const contentWidth = useThrottle(width, 500)
+const contentWidth = useThrottle(width, 250)
 const contentTop = useThrottle(top, 125)
 
 onMounted(() => {
@@ -169,7 +169,7 @@ watchEffect(() => {
     const spaces = new Array(length)
 
     let start = 0
-    // 是否启用缓存
+    // 是否启用缓存：只有当新增元素时，只需要计算新增元素的信息
     const cache = length > itemSpaces.value.length
     if (cache) {
         start = itemSpaces.value.length
@@ -203,7 +203,7 @@ watchEffect(() => {
     itemSpaces.value = spaces
 })
 
-// 需要渲染的items
+// 虚拟列表逻辑：需要渲染的items
 const itemRenderList = computed<SpaceOption[]>(() => {
     const length = itemSpaces.value.length
     if (!length) {
@@ -212,7 +212,7 @@ const itemRenderList = computed<SpaceOption[]>(() => {
     const top = -contentTop.value
     const preloadScreenCount = props.preloadScreenCount
     // 避免多次访问
-    const innerHeight = window.innerHeight
+    const innerHeight = container.value.clientHeight
     // 顶部的范围: 向上预加载preloadScreenCount个屏幕，Y轴上部
     const topLimit = top - preloadScreenCount * innerHeight
     // 底部的范围: 向下预加载preloadScreenCount个屏幕
@@ -232,11 +232,12 @@ const getColumnIndex = (): number => {
     return columnsTop.value.indexOf(Math.min(...columnsTop.value))
 }
 
-// 滚动到顶部
+// 暴露的方法: 滚动到顶部
 defineExpose({
     backTop() {
         container.value?.scrollTo({
-            top: 0
+            top: 0,
+            behavior: 'instant'
         })
     }
 })
@@ -250,6 +251,7 @@ defineExpose({
     visibility: visible;
     scrollbar-width: none;
     -ms-overflow-style: none;
+    scroll-behavior: smooth;
 
     &::-webkit-scrollbar {
         display: none;