fix(ScrollableFamilyList): 优化滚动行为和文本显示
- 禁用enhanced和bounces属性以改善滚动体验 - 添加外部滚动监听判断防止重复触发 - 增加滚动到底部的延迟触发防止快速翻页 - 将文本显示行数从2行改为3行
Showing
1 changed file
with
7 additions
and
5 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" |
| ... | @@ -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 | + setTimeout(() => { | ||
| 258 | // 触发翻页到下一页 | 259 | // 触发翻页到下一页 |
| 259 | changePage('next') | 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