fix(ScrollableFamilyList): 优化滚动行为和文本显示
- 禁用enhanced和bounces属性以改善滚动体验 - 添加外部滚动监听判断防止重复触发 - 增加滚动到底部的延迟触发防止快速翻页 - 将文本显示行数从2行改为3行
Showing
1 changed file
with
10 additions
and
8 deletions
| ... | @@ -6,8 +6,8 @@ | ... | @@ -6,8 +6,8 @@ |
| 6 | :scroll-top="scrollTop" | 6 | :scroll-top="scrollTop" |
| 7 | :enable-back-to-top="false" | 7 | :enable-back-to-top="false" |
| 8 | :scroll-with-animation="true" | 8 | :scroll-with-animation="true" |
| 9 | - :enhanced="true" | 9 | + :enhanced="false" |
| 10 | - :bounces="true" | 10 | + :bounces="false" |
| 11 | :show-scrollbar="false" | 11 | :show-scrollbar="false" |
| 12 | @scroll="onScroll" | 12 | @scroll="onScroll" |
| 13 | @scrolltoupper="onScrollToUpper" | 13 | @scrolltoupper="onScrollToUpper" |
| ... | @@ -113,7 +113,7 @@ const generateRandomOffsets = () => { | ... | @@ -113,7 +113,7 @@ const generateRandomOffsets = () => { |
| 113 | randomOffsets.value = Array.from({ length: actualItemCount }, (_, index) => { | 113 | randomOffsets.value = Array.from({ length: actualItemCount }, (_, index) => { |
| 114 | // 按行数规律排列:奇数行(1,3,5...)靠左,偶数行(2,4,6...)靠右 | 114 | // 按行数规律排列:奇数行(1,3,5...)靠左,偶数行(2,4,6...)靠右 |
| 115 | const rowNumber = index + 1 // 行号从1开始 | 115 | const rowNumber = index + 1 // 行号从1开始 |
| 116 | - | 116 | + |
| 117 | if (rowNumber % 2 === 1) { | 117 | if (rowNumber % 2 === 1) { |
| 118 | // 奇数行靠左边容器 | 118 | // 奇数行靠左边容器 |
| 119 | return 0 // 不偏移,靠左 | 119 | return 0 // 不偏移,靠左 |
| ... | @@ -169,7 +169,7 @@ const onScroll = (e) => { | ... | @@ -169,7 +169,7 @@ const onScroll = (e) => { |
| 169 | 169 | ||
| 170 | // 滚动到顶部 - 优化触发逻辑 | 170 | // 滚动到顶部 - 优化触发逻辑 |
| 171 | const onScrollToUpper = () => { | 171 | const onScrollToUpper = () => { |
| 172 | - if (isTransitioning.value) return | 172 | + if (props.listenExternalScroll || isTransitioning.value) return |
| 173 | 173 | ||
| 174 | // 添加延迟防抖,避免快速触发 | 174 | // 添加延迟防抖,避免快速触发 |
| 175 | setTimeout(() => { | 175 | setTimeout(() => { |
| ... | @@ -181,7 +181,7 @@ const onScrollToUpper = () => { | ... | @@ -181,7 +181,7 @@ const onScrollToUpper = () => { |
| 181 | 181 | ||
| 182 | // 滚动到底部 - 优化触发逻辑 | 182 | // 滚动到底部 - 优化触发逻辑 |
| 183 | const onScrollToLower = () => { | 183 | const onScrollToLower = () => { |
| 184 | - if (isTransitioning.value) return | 184 | + if (props.listenExternalScroll || isTransitioning.value) return |
| 185 | 185 | ||
| 186 | // 添加延迟防抖,避免快速触发 | 186 | // 添加延迟防抖,避免快速触发 |
| 187 | setTimeout(() => { | 187 | setTimeout(() => { |
| ... | @@ -255,8 +255,10 @@ const handleExternalScroll = (res) => { | ... | @@ -255,8 +255,10 @@ const handleExternalScroll = (res) => { |
| 255 | 255 | ||
| 256 | // 判断是否滚动到底部(留一些余量) | 256 | // 判断是否滚动到底部(留一些余量) |
| 257 | if (scrollTop + windowHeight >= scrollHeight - 50) { | 257 | if (scrollTop + windowHeight >= scrollHeight - 50) { |
| 258 | - // 触发翻页到下一页 | 258 | + setTimeout(() => { |
| 259 | - changePage('next') | 259 | + // 触发翻页到下一页 |
| 260 | + changePage('next') | ||
| 261 | + }, 100) | ||
| 260 | } | 262 | } |
| 261 | } | 263 | } |
| 262 | }) | 264 | }) |
| ... | @@ -386,7 +388,7 @@ onMounted(() => { | ... | @@ -386,7 +388,7 @@ onMounted(() => { |
| 386 | display: -webkit-box; | 388 | display: -webkit-box; |
| 387 | overflow: hidden; | 389 | overflow: hidden; |
| 388 | text-overflow: ellipsis; | 390 | text-overflow: ellipsis; |
| 389 | - -webkit-line-clamp: 2; | 391 | + -webkit-line-clamp: 3; |
| 390 | -webkit-box-orient: vertical; | 392 | -webkit-box-orient: vertical; |
| 391 | line-height: 1.5; | 393 | line-height: 1.5; |
| 392 | font-weight: 500; | 394 | font-weight: 500; | ... | ... |
-
Please register or login to post a comment