|
|
@@ -16,6 +16,7 @@
|
|
|
<template>
|
|
|
<view class="home-container">
|
|
|
<scroll-view class="scroll-view" scroll-y>
|
|
|
+ <view class="scroll-content">
|
|
|
<!-- 状态栏占位 -->
|
|
|
<view class="status-bar-placeholder" :style="{ height: statusBarHeight + 'px' }"></view>
|
|
|
|
|
|
@@ -74,6 +75,10 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部留白占位:内容超出屏幕时补充底部间距 -->
|
|
|
+ <view v-if="bottomSpacerHeight > 0" :style="{ height: bottomSpacerHeight + 'px' }"></view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<!-- 网络状态提示 -->
|
|
|
@@ -108,7 +113,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
|
|
+import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
|
|
import { onShow, onLoad } from '@dcloudio/uni-app'
|
|
|
import { useUserStore } from '@/store/user'
|
|
|
import { useConfigStore } from '@/store/config'
|
|
|
@@ -132,8 +137,10 @@ const refresh = ref(false)
|
|
|
const userId = ref('')
|
|
|
const cardItemRef = reactive<Record<string, any>>({})
|
|
|
const windowWidth = ref(0)
|
|
|
+const windowHeight = ref(0)
|
|
|
const statusBarHeight = ref(20)
|
|
|
const networkStatus = ref(true)
|
|
|
+const bottomSpacerHeight = ref(0)
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
const userInfo = computed(() => userStore.userInfo)
|
|
|
@@ -185,13 +192,34 @@ onShow(() => {
|
|
|
refreshAllCards()
|
|
|
})
|
|
|
|
|
|
-// 获取屏幕宽度
|
|
|
+// 获取屏幕信息
|
|
|
const getWindowWidth = () => {
|
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
|
windowWidth.value = systemInfo.windowWidth || 375
|
|
|
+ windowHeight.value = systemInfo.windowHeight || 667
|
|
|
statusBarHeight.value = systemInfo.statusBarHeight || 20
|
|
|
}
|
|
|
|
|
|
+// 计算底部留白占位高度
|
|
|
+const calcBottomSpacer = () => {
|
|
|
+ nextTick(() => {
|
|
|
+ const query = uni.createSelectorQuery()
|
|
|
+ query.select('.scroll-content').boundingClientRect()
|
|
|
+ query.exec((res) => {
|
|
|
+ if (res && res[0]) {
|
|
|
+ const contentHeight = (res[0] as UniApp.NodeInfo).height || 0
|
|
|
+ const minBottomSpace = 40
|
|
|
+ // 内容超出可视区域时,补充底部间距
|
|
|
+ if (contentHeight > windowHeight.value - minBottomSpace) {
|
|
|
+ bottomSpacerHeight.value = minBottomSpace * 1.5
|
|
|
+ } else {
|
|
|
+ bottomSpacerHeight.value = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
// 监听网络状态
|
|
|
const onNetworkStatusChange = (res: any) => {
|
|
|
networkStatus.value = res.isConnected
|
|
|
@@ -223,6 +251,7 @@ onMounted(() => {
|
|
|
getWindowWidth()
|
|
|
getUserId()
|
|
|
checkNetworkStatus()
|
|
|
+ calcBottomSpacer()
|
|
|
|
|
|
// 监听网络状态变化
|
|
|
uni.onNetworkStatusChange(onNetworkStatusChange)
|