修正多处问题
This commit is contained in:
@@ -1,14 +1,10 @@
|
||||
<template>
|
||||
<!-- 固定白色块(滚动时显示) -->
|
||||
<view class="hand" :style="{height : handHeight + 50 + 'rpx',lineHeight: handHeight + 70 + 'rpx'}" v-show="isShow">活氧舱</view>
|
||||
|
||||
<!-- 页面头部 -->
|
||||
<PageHeader title="活氧舱" subtitle="科学训练 · 遇见更好的自己" />
|
||||
|
||||
<!-- 滚动内容区域 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
refresher-enabled
|
||||
:refresher-triggered="isRefreshing"
|
||||
refresher-default-style="none"
|
||||
@refresherrefresh="onRefresh"
|
||||
@scroll="handleScroll"
|
||||
class="scroll-container"
|
||||
>
|
||||
@@ -18,8 +14,8 @@
|
||||
<template v-else>
|
||||
<BannerSwiper />
|
||||
<QuickEntry />
|
||||
<RecommendCourses />
|
||||
<TodayRecommend />
|
||||
<RecommendCourses ref="recommendCoursesRef" />
|
||||
<TodayRecommend ref="todayRecommendRef" />
|
||||
<view class="bottom-placeholder"></view>
|
||||
</template>
|
||||
</view>
|
||||
@@ -40,60 +36,19 @@ import RecommendCourses from '@/components/index/RecommendCourses.vue'
|
||||
import TodayRecommend from '@/components/index/TodayRecommend.vue'
|
||||
import TabBar from '@/components/TabBar.vue'
|
||||
import HomeSkeleton from '@/components/Skeleton/HomeSkeleton.vue'
|
||||
import PageHeader from '@/components/index/PageHeader.vue'
|
||||
|
||||
const loading = ref(true)
|
||||
const isShow = ref(false)
|
||||
const handHeight = ref(0)
|
||||
const scrollDistance = ref(0)
|
||||
const isRefreshing = ref(false)
|
||||
const recommendCoursesRef = ref(null)
|
||||
const todayRecommendRef = ref(null)
|
||||
|
||||
// 获取可视窗口高度
|
||||
const windowHeight = ref(0)
|
||||
// 获取整个滚动内容的高度
|
||||
const scrollContentHeight = ref(0)
|
||||
// 滚动距离
|
||||
const scrollDistance = ref(0)
|
||||
|
||||
// 滚动监听
|
||||
const handleScroll = (e) => {
|
||||
const distance = e.detail.scrollTop
|
||||
scrollDistance.value = distance
|
||||
|
||||
console.log(`滚动距离: ${distance}`)
|
||||
|
||||
// 当滚动超过一定距离时显示白色块(200px = 400rpx)
|
||||
const SHOW_THRESHOLD = 50 // 滚动超过200px时显示白条
|
||||
isShow.value = distance > SHOW_THRESHOLD
|
||||
}
|
||||
|
||||
// 下拉刷新处理
|
||||
const onRefresh = async () => {
|
||||
console.log('开始下拉刷新')
|
||||
isRefreshing.value = true
|
||||
|
||||
try {
|
||||
await refreshData()
|
||||
isRefreshing.value = false
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('刷新失败', error)
|
||||
isRefreshing.value = false
|
||||
uni.showToast({
|
||||
title: '刷新失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
const refreshData = () => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
console.log('数据已刷新')
|
||||
resolve()
|
||||
}, 1500)
|
||||
})
|
||||
scrollDistance.value = e.detail.scrollTop
|
||||
console.log(`滚动距离: ${scrollDistance.value}`)
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
@@ -114,41 +69,6 @@ onMounted(() => {
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
|
||||
// 获取系统信息
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
windowHeight.value = res.windowHeight
|
||||
console.log('可视窗口高度:', windowHeight.value)
|
||||
console.log('平台:', res.platform)
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序使用胶囊按钮高度(保持原有逻辑)
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
const navTotalHeight = menuButtonInfo.top + menuButtonInfo.height
|
||||
handHeight.value = navTotalHeight * 2.5
|
||||
console.log('微信小程序胶囊按钮高度:', handHeight.value)
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
// H5和安卓App只显示状态栏高度
|
||||
const statusBarHeight = res.statusBarHeight || 0
|
||||
handHeight.value = statusBarHeight * 2 // 转换为rpx(1px = 2rpx)
|
||||
console.log('非微信小程序状态栏高度:', handHeight.value, 'rpx')
|
||||
// #endif
|
||||
}
|
||||
})
|
||||
|
||||
// 延迟获取滚动内容高度(确保DOM已渲染)
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
query.select('.home-page').boundingClientRect(data => {
|
||||
if (data) {
|
||||
scrollContentHeight.value = data.height
|
||||
console.log('内容总高度:', scrollContentHeight.value)
|
||||
}
|
||||
}).exec()
|
||||
}, 500)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -167,18 +87,6 @@ onMounted(() => {
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
/* 固定白色块 */
|
||||
.hand {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
/* 固定 TabBar */
|
||||
.tabbar-fixed {
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user