sticky-header 吸顶设置透明, 下滑文字重叠
- 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
Assessment
This issue has not been assessed yet.