Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
lls_program
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-09-06 18:27:16 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
7ea37b227adc8ce7c8792cb032295f38d4a2f565
7ea37b22
1 parent
3919b6e7
fix(PointsList): 动态计算滚动区域高度避免布局问题
添加动态计算搜索和分类区域高度的功能,取代之前使用的固定值 确保在不同屏幕尺寸下滚动区域高度计算准确
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
55 additions
and
2 deletions
src/pages/PointsList/index.vue
src/pages/PointsList/index.vue
View file @
7ea37b2
...
...
@@ -36,6 +36,7 @@
<scroll-view
class="points-list"
:scroll-y="true"
:catch-move="true"
:style="scrollStyle"
>
<view class="points-items">
...
...
@@ -311,15 +312,64 @@ const pointsItems = ref([
])
/**
* 搜索区域高度
*/
const searchSectionHeight = ref(0)
/**
* 分类区域高度
*/
const categorySectionHeight = ref(0)
/**
* 滚动样式
*/
const scrollStyle = computed(() => {
const totalFixedHeight = searchSectionHeight.value + categorySectionHeight.value
return {
height:
'calc(100vh - 260rpx)' // 减去header、搜索框、分类的高度
height:
`calc(100vh - ${totalFixedHeight}rpx)`
}
})
/**
* 获取元素高度
* @param {string} selector - 元素选择器
* @returns {Promise<number>} 元素高度(rpx)
*/
const getElementHeight = (selector) => {
return new Promise((resolve) => {
const query = Taro.createSelectorQuery()
query.select(selector).boundingClientRect((rect) => {
if (rect) {
// 将px转换为rpx
const height = rect.height * 2
resolve(height)
} else {
resolve(0)
}
}).exec()
})
}
/**
* 计算固定区域高度
*/
const calculateFixedHeight = async () => {
try {
const searchHeight = await getElementHeight('.search-section')
const categoryHeight = await getElementHeight('.category-section')
searchSectionHeight.value = searchHeight
categorySectionHeight.value = categoryHeight
} catch (error) {
console.error('计算高度失败:', error)
// 使用默认值
searchSectionHeight.value = 144 // 搜索区域默认高度
categorySectionHeight.value = 200 // 分类区域默认高度
}
}
/**
* 过滤后的积分攻略项
*/
const filteredPointsItems = computed(() => {
...
...
@@ -382,7 +432,10 @@ const closeDetail = () => {
// ==================== 生命周期 ====================
onMounted(() => {
// 页面初始化逻辑
// 延时计算高度,确保DOM渲染完成
setTimeout(() => {
calculateFixedHeight()
}, 100)
})
</script>
...
...
Please
register
or
login
to post a comment