hookehuyr

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

- 禁用enhanced和bounces属性以改善滚动体验
- 添加外部滚动监听判断防止重复触发
- 增加滚动到底部的延迟触发防止快速翻页
- 将文本显示行数从2行改为3行
...@@ -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;
......