<template>
<waterfall
class="page"
column-count="2"
:left-gap="5"
:right-gap="5"
:column-gap="5"
column-width="auto"
:show-scrollbar="false"
>
<header>
<view class="header">
<text class="header-title">header</text>
</view>
</header>
<header style="position: sticky;">
<text class="sticky-tag">stickyTags</text>
</header>
<cell v-for="(item, index) in dataList" :key="item.id">
<view>
<text>{{item.name}}</text>
</view>
</cell>
</waterfall>
</template>
<script>
export default {
data() {
return {
dataList: []
}
},
created() {
for (var i = 0; i < 30; i++) {
this.dataList.push({
id: i,
name: i
});
}
}
}
</script>
<style>
.page {
flex: 1;
}
.header {
height: 800px;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: #ff0001;
}
.header-title {
font-size: 30px;
font-weight: 700;
color: #444;
}
.sticky-tag {
text-align: center;
background-color: #007AFF;
}
</style> 
coderYzj
- 发布：2021-03-26 09:45
- 更新：2021-05-27 17:31
- 阅读：757
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.1.4
手机系统： iOS
手机系统版本号： IOS 14
手机厂商： 苹果
手机机型： 6sp、12 pro
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
代码直接运行
代码直接运行
预期结果：
header不在可视区域不置底
header不在可视区域不置底
实际结果：
header不在可视区域会置底
header不在可视区域会置底
bug描述：
waterfall吸顶区域不在可视区域时，会置底
3 个回复
coderYzj (作者)
2个月时间，来打个卡
coderYzj (作者)
有人能给个回应吗？
是bug的话，另谋他路。
闪到腰的咸鱼
版本更新后，同样有这个问题，求官方快速解决，都是电商平台上面常用到的