hookehuyr

fix(ScrollableFamilyList): 优化滚动行为和文本显示

- 禁用enhanced和bounces属性以改善滚动体验
- 添加外部滚动监听判断防止重复触发
- 增加滚动到底部的延迟触发防止快速翻页
- 将文本显示行数从2行改为3行
......@@ -6,8 +6,8 @@
:scroll-top="scrollTop"
:enable-back-to-top="false"
:scroll-with-animation="true"
:enhanced="true"
:bounces="true"
:enhanced="false"
:bounces="false"
:show-scrollbar="false"
@scroll="onScroll"
@scrolltoupper="onScrollToUpper"
......@@ -113,7 +113,7 @@ const generateRandomOffsets = () => {
randomOffsets.value = Array.from({ length: actualItemCount }, (_, index) => {
// 按行数规律排列:奇数行(1,3,5...)靠左,偶数行(2,4,6...)靠右
const rowNumber = index + 1 // 行号从1开始
if (rowNumber % 2 === 1) {
// 奇数行靠左边容器
return 0 // 不偏移,靠左
......@@ -169,7 +169,7 @@ const onScroll = (e) => {
// 滚动到顶部 - 优化触发逻辑
const onScrollToUpper = () => {
if (isTransitioning.value) return
if (props.listenExternalScroll || isTransitioning.value) return
// 添加延迟防抖,避免快速触发
setTimeout(() => {
......@@ -181,7 +181,7 @@ const onScrollToUpper = () => {
// 滚动到底部 - 优化触发逻辑
const onScrollToLower = () => {
if (isTransitioning.value) return
if (props.listenExternalScroll || isTransitioning.value) return
// 添加延迟防抖,避免快速触发
setTimeout(() => {
......@@ -255,8 +255,10 @@ const handleExternalScroll = (res) => {
// 判断是否滚动到底部(留一些余量)
if (scrollTop + windowHeight >= scrollHeight - 50) {
// 触发翻页到下一页
changePage('next')
setTimeout(() => {
// 触发翻页到下一页
changePage('next')
}, 100)
}
}
})
......@@ -386,7 +388,7 @@ onMounted(() => {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 1.5;
font-weight: 500;
......