dcloudio / dcloudio/uni-app

sticky-header 吸顶设置透明, 下滑文字重叠

Open
#5,683 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

### 发行方式

App

### 具体平台

Android

### 开发环境

Windows

### 项目创建方式

HBuilderX

### 依赖版本

HBuildX 4.75

### 问题描述

问题如附件视频

### 重现步骤

代码如下:

```










sticky-header吸顶



itme-content-{{index}}




// 下拉刷新事件
const isRefresherTriggered = ref(false);
const onRefresh = async () => {
isRefresherTriggered.value = true;
// await loadData();
// 给一点时间,让 UI 动画完成再关闭刷新状态
setTimeout(() => {
isRefresherTriggered.value = false
}, 500)
}

.friend-box {
width: 100%;
height: 100%;
// border: 10rpx solid red;
display: flex;
position: relative;
z-index: 0;

.friend-content-box {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
transition: opacity 0.2s ease;
// border: 10px solid blueviolet;

.friend-list-view {
flex: 1;
width: 100%;

.sticky-bg-box {
height: 100%;
width: 100%;
display: flex;
align-items: flex-end; // 图片在底部对齐
position: relative;
z-index: 0;

.sticky-bg-image {
height: 100%;
width: 100%;
}
}

.sticky-header-title {
width: 100%;
position: absolute;
top: 0%;
z-index: 1;
// padding: 20rpx;
// color: #000;
// background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3));
}

.friend-block-top-box {
width: 100%;
height: 100px;
// background-color: aquamarine;
border: 1px solid aquamarine;
}

.friend-list-item-view {
width: 100%;
height: 100px;
background-color: aqua;
}
}
}
}

```

### 期望行为

list-item 滑到 sticky-header 区域的时候, 希望 list-item 消失不见

### 实际行为

_No response_

### 截图或录屏

https://github.com/user-attachments/assets/3c0809d4-663d-4c6d-81de-90d27bd27911

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.