cr
/
fjrcloud-community-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复渐变背景定位问题

main
cr 2026-04-25 22:10:33 +08:00
parent 8bac945106
commit 0ab1535f7f
6 changed files with 70 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/sub/activity/list.vue
View File

@ -178,15 +178,15 @@ function handleFloatBtn() {
position: relative;
}
/* 渐变背景装饰 - 覆盖导航栏到内容区 */
/* 渐变背景装饰 */
.gradient-bg {
position: absolute;
top: -176rpx; /* 向上延伸覆盖inner-navbar */
top: 0;
left: 0;
right: 0;
height: calc(100% + 176rpx);
height: 100%;
background: linear-gradient(180deg, #F8EDE8 0%, #FFFFFF 30%);
z-index: -1; /* 在内容层下方 */
z-index: -1;
}
/* 固定头部区域 */

33
pages/sub/community/dynamics-detail.vue
View File

@ -1,11 +1,12 @@
<!-- 社区动态详情页 -->
<template>
<s-layout title="社区动态" navbar="inner" color="#333333">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<s-layout title="社区动态" color="#333333">
<view class="detail-page">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<!-- 固定头部区域（标题+发布信息） -->
<view class="detail-header">
<!-- 固定头部区域（标题+发布信息） -->
<view class="detail-header" :style="{ top: navbarHeight + 'px' }">
<view class="header-inner">
<!-- 标题 -->
<view class="detail-title">
@ -33,6 +34,7 @@
<!-- 底部占位 -->
<view class="bottom-placeholder"></view>
</scroll-view>
</view>
</s-layout>
</template>
@ -55,6 +57,9 @@ const scrollHeight = ref(0);
// 滚动区域距离顶部距离
const scrollTop = ref(0);
// 导航栏高度（px），用于固定头部避开导航栏
const navbarHeight = sheep.$platform.navbar;
// 页面加载
onLoad((options) => {
if (options.id) {
@ -69,13 +74,14 @@ const calcScrollHeight = () => {
const sysInfo = uni.getSystemInfoSync();
const query = uni.createSelectorQuery().in(instance);
// 获取头部区域高度和位置
// 获取头部区域高度
query.select('.detail-header').boundingClientRect();
query.exec((res) => {
const headerRect = res[0];
if (headerRect) {
const safeBottom = sysInfo.safeAreaInsets?.bottom || 0;
scrollTop.value = headerRect.height + headerRect.top;
// scroll-view 顶部 = 导航栏高度 + 头部高度，不再依赖 headerRect.top（fixed 元素在不同平台表现不一致）
scrollTop.value = navbarHeight + headerRect.height;
scrollHeight.value = sysInfo.windowHeight - scrollTop.value - safeBottom;
}
});
@ -99,15 +105,24 @@ async function loadDetail(id) {
content: data.content || '',
};
setTimeout(calcScrollHeight, 100);
// 等 Vue DOM 更新完成后再计算高度，避免网络延迟导致拿到旧尺寸
nextTick(() => {
calcScrollHeight();
});
}
}
</script>
<style lang="scss" scoped>
/* 页面容器 */
.detail-page {
position: relative;
z-index: 1;
}
/* 渐变背景 */
.gradient-bg {
position: fixed;
position: absolute;
top: 0;
left: 0;
width: 750rpx;

11
pages/sub/community/dynamics.vue
View File

@ -1,10 +1,9 @@
<!-- 社区动态页面 -->
<template>
<s-layout title="社区动态" navbar="inner" color="#333333">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<s-layout title="社区动态" color="#333333">
<view class="community-dynamics-page">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<!-- Tab 切换栏 -->
<view class="tab-bar">
<view
@ -190,10 +189,10 @@ function goDetail(item) {
<style lang="scss" scoped>
/* 渐变背景 */
.gradient-bg {
position: fixed;
position: absolute;
top: 0;
left: 0;
width: 750rpx;
width: 100%;
height: 660rpx;
background: linear-gradient(180deg, #F8EDE8 0%, #F5F5F5 50%);
z-index: 0;

21
pages/sub/knowledge/classroom.vue
View File

@ -1,10 +1,9 @@
<!-- 知识课堂页面 -->
<template>
<s-layout title="知识课堂" navbar="inner" color="#333333">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<s-layout title="知识课堂" color="#333333">
<view class="knowledge-classroom-page">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<!-- Tab 切换栏 -->
<view class="tab-bar">
<view
@ -198,9 +197,15 @@ function goDetail(item) {
</script>
<style lang="scss" scoped>
/* 页面容器 */
.knowledge-classroom-page {
position: relative;
z-index: 1;
}
/* 渐变背景 */
.gradient-bg {
position: fixed;
position: absolute;
top: 0;
left: 0;
width: 750rpx;
@ -210,12 +215,6 @@ function goDetail(item) {
pointer-events: none;
}
/* 页面容器 */
.knowledge-classroom-page {
position: relative;
z-index: 1;
}
/* Tab 切换栏 */
.tab-bar {
display: flex;

19
pages/sub/knowledge/detail.vue
View File

@ -1,10 +1,11 @@
<!-- 知识课堂详情页 -->
<template>
<s-layout title="知识课堂" navbar="inner" color="#333333">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<s-layout title="知识课堂" color="#333333">
<view class="detail-page">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<!-- 固定头部区域（标题+发布信息） -->
<!-- 固定头部区域（标题+发布信息） -->
<view class="detail-header">
<view class="header-inner">
<!-- 标题 -->
@ -33,6 +34,7 @@
<!-- 底部占位 -->
<view class="bottom-placeholder"></view>
</scroll-view>
</view>
</s-layout>
</template>
@ -103,9 +105,15 @@ async function loadDetail(id) {
</script>
<style lang="scss" scoped>
/* 页面容器 */
.detail-page {
position: relative;
z-index: 1;
}
/* 渐变背景 */
.gradient-bg {
position: fixed;
position: absolute;
top: 0;
left: 0;
width: 750rpx;
@ -179,7 +187,6 @@ async function loadDetail(id) {
/* 内容卡片 */
.content-card {
background-color: #FFF8F0;
border-radius: 24rpx;
padding: 32rpx;
margin: 0 32rpx;

24
pages/sub/notice/detail.vue
View File

@ -1,10 +1,11 @@
<!-- 通知公告详情页 -->
<template>
<s-layout title="通知公告" navbar="inner" color="#333333">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<s-layout title="通知公告" color="#333333">
<view class="detail-page">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<!-- 固定头部区域 -->
<!-- 固定头部区域 -->
<view class="detail-header">
<view class="header-inner">
<!-- 文章标题 -->
@ -54,6 +55,7 @@
</view>
</view>
</view>
</view>
</s-layout>
</template>
@ -246,9 +248,15 @@ function downloadAttachment(item) {
</script>
<style lang="scss" scoped>
/* 页面容器 */
.detail-page {
position: relative;
z-index: 1;
}
/* 渐变背景 */
.gradient-bg {
position: fixed;
position: absolute;
top: 0;
left: 0;
width: 750rpx;
@ -258,12 +266,6 @@ function downloadAttachment(item) {
pointer-events: none;
}
/* 页面容器 */
.notice-detail-page {
position: relative;
z-index: 1;
}
/* 固定头部区域（标题+发布信息） */
.detail-header {
position: fixed;