qlingYes
qlingYes
  • 发布:2022-01-29 19:36
  • 更新:2022-01-30 11:40
  • 阅读:941

waterfall嵌套多个header后不是所有都能吸顶

分类:nvue

怎么让两个header都吸顶呢?

<template>  
    <view style="height: 1000rpx;">  
        <waterfall :column-count="1" column-width="auto">  
            <cell>  
                <view style="background-color: #007AFF;height: 200rpx;">waterfall</view>  
            </cell>  

            <header class="sticky">  
                <view class="v">  
                    <text>header1</text>  
                </view>  
            </header>  
            <header class="sticky">  
                <view class="v">  
                    <text>header2</text>  
                </view>  
            </header>  

            <cell>  
                <view style="background-color: #007AFF;height: 1750rpx;">waterfall</view>  
            </cell>  
        </waterfall>  
    </view>  
</template>  
<style>  
.sticky {  
    position: sticky;  
    top: 0rpx;  
}  
.v{  
    height: 100rpx;  
    width: 300rpx;  
    margin: 50rpx;  
    background-color: #4CD964;  
}  
</style>  
2022-01-29 19:36 负责人:无 分享
已邀请:
速翔网络

速翔网络

写2个 position: sticky;
top: 0rpx;
然后加z-index:数字,数字越高显示最前

  • qlingYes (作者)

    这是nvue它没有这个z-index

    2022-01-29 20:53

6***@qq.com

6***@qq.com

似乎需要 去掉class属性 sticky

  • qlingYes (作者)

    去掉然后用内联???

    2022-01-30 11:55

  • 6***@qq.com

    回复 3***@qq.com: <header>

    <view class="v">

    <text>header1</text>

    </view>

    </header>

    2022-01-30 12:09

该问题目前已经被锁定, 无法添加新回复