hookehuyr

fix(PointsList): 动态计算滚动区域高度避免布局问题

添加动态计算搜索和分类区域高度的功能,取代之前使用的固定值
确保在不同屏幕尺寸下滚动区域高度计算准确
...@@ -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
......