fix(PointsList): 动态计算滚动区域高度避免布局问题
添加动态计算搜索和分类区域高度的功能,取代之前使用的固定值 确保在不同屏幕尺寸下滚动区域高度计算准确
Showing
1 changed file
with
55 additions
and
2 deletions
| ... | @@ -36,6 +36,7 @@ | ... | @@ -36,6 +36,7 @@ |
| 36 | <scroll-view | 36 | <scroll-view |
| 37 | class="points-list" | 37 | class="points-list" |
| 38 | :scroll-y="true" | 38 | :scroll-y="true" |
| 39 | + :catch-move="true" | ||
| 39 | :style="scrollStyle" | 40 | :style="scrollStyle" |
| 40 | > | 41 | > |
| 41 | <view class="points-items"> | 42 | <view class="points-items"> |
| ... | @@ -311,15 +312,64 @@ const pointsItems = ref([ | ... | @@ -311,15 +312,64 @@ const pointsItems = ref([ |
| 311 | ]) | 312 | ]) |
| 312 | 313 | ||
| 313 | /** | 314 | /** |
| 315 | + * 搜索区域高度 | ||
| 316 | + */ | ||
| 317 | +const searchSectionHeight = ref(0) | ||
| 318 | + | ||
| 319 | +/** | ||
| 320 | + * 分类区域高度 | ||
| 321 | + */ | ||
| 322 | +const categorySectionHeight = ref(0) | ||
| 323 | + | ||
| 324 | +/** | ||
| 314 | * 滚动样式 | 325 | * 滚动样式 |
| 315 | */ | 326 | */ |
| 316 | const scrollStyle = computed(() => { | 327 | const scrollStyle = computed(() => { |
| 328 | + const totalFixedHeight = searchSectionHeight.value + categorySectionHeight.value | ||
| 317 | return { | 329 | return { |
| 318 | - height: 'calc(100vh - 260rpx)' // 减去header、搜索框、分类的高度 | 330 | + height: `calc(100vh - ${totalFixedHeight}rpx)` |
| 319 | } | 331 | } |
| 320 | }) | 332 | }) |
| 321 | 333 | ||
| 322 | /** | 334 | /** |
| 335 | + * 获取元素高度 | ||
| 336 | + * @param {string} selector - 元素选择器 | ||
| 337 | + * @returns {Promise<number>} 元素高度(rpx) | ||
| 338 | + */ | ||
| 339 | +const getElementHeight = (selector) => { | ||
| 340 | + return new Promise((resolve) => { | ||
| 341 | + const query = Taro.createSelectorQuery() | ||
| 342 | + query.select(selector).boundingClientRect((rect) => { | ||
| 343 | + if (rect) { | ||
| 344 | + // 将px转换为rpx | ||
| 345 | + const height = rect.height * 2 | ||
| 346 | + resolve(height) | ||
| 347 | + } else { | ||
| 348 | + resolve(0) | ||
| 349 | + } | ||
| 350 | + }).exec() | ||
| 351 | + }) | ||
| 352 | +} | ||
| 353 | + | ||
| 354 | +/** | ||
| 355 | + * 计算固定区域高度 | ||
| 356 | + */ | ||
| 357 | +const calculateFixedHeight = async () => { | ||
| 358 | + try { | ||
| 359 | + const searchHeight = await getElementHeight('.search-section') | ||
| 360 | + const categoryHeight = await getElementHeight('.category-section') | ||
| 361 | + | ||
| 362 | + searchSectionHeight.value = searchHeight | ||
| 363 | + categorySectionHeight.value = categoryHeight | ||
| 364 | + } catch (error) { | ||
| 365 | + console.error('计算高度失败:', error) | ||
| 366 | + // 使用默认值 | ||
| 367 | + searchSectionHeight.value = 144 // 搜索区域默认高度 | ||
| 368 | + categorySectionHeight.value = 200 // 分类区域默认高度 | ||
| 369 | + } | ||
| 370 | +} | ||
| 371 | + | ||
| 372 | +/** | ||
| 323 | * 过滤后的积分攻略项 | 373 | * 过滤后的积分攻略项 |
| 324 | */ | 374 | */ |
| 325 | const filteredPointsItems = computed(() => { | 375 | const filteredPointsItems = computed(() => { |
| ... | @@ -382,7 +432,10 @@ const closeDetail = () => { | ... | @@ -382,7 +432,10 @@ const closeDetail = () => { |
| 382 | 432 | ||
| 383 | // ==================== 生命周期 ==================== | 433 | // ==================== 生命周期 ==================== |
| 384 | onMounted(() => { | 434 | onMounted(() => { |
| 385 | - // 页面初始化逻辑 | 435 | + // 延时计算高度,确保DOM渲染完成 |
| 436 | + setTimeout(() => { | ||
| 437 | + calculateFixedHeight() | ||
| 438 | + }, 100) | ||
| 386 | }) | 439 | }) |
| 387 | </script> | 440 | </script> |
| 388 | 441 | ... | ... |
-
Please register or login to post a comment