闪到腰的咸鱼
闪到腰的咸鱼
  • 发布:2020-07-08 09:51
  • 更新:2023-03-23 17:23
  • 阅读:1154

【报Bug】swiper-list-nvue.nvue例子中 id="head"的高度大于屏幕高度时,子list吸顶之后无法正常滑动

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.7.14

手机系统: 全部

手机厂商: 苹果

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

iphone XS,iphone 7p,华为,小米,vivo

示例代码:
.header {  
        height: 700px;  
        flex-direction: row;  
        align-items: center;  
        justify-content: center;  
        background-color: #f4f4f4;  
    }  
uni.createSelectorQuery().in(this).select('#head').boundingClientRect().exec(rect => {  
                    console.log(rect[0].height);  
                    this._headHeight = 700;  
                });

操作步骤:
//只做了以下两处修改  
.header {  
        height: 700px;  
        flex-direction: row;  
        align-items: center;  
        justify-content: center;  
        background-color: #f4f4f4;  
    }  
uni.createSelectorQuery().in(this).select('#head').boundingClientRect().exec(rect => {  
                    console.log(rect[0].height);  
                    this._headHeight = 700;  
                });

预期结果:

子list吸顶之后可以正常滑动

实际结果:

子list吸顶之后不能滑动

bug描述:

针对uni-app官方提供的list滚动吸顶效果的案例,原原本本复制粘贴在自己的项目上,修改其中 id="head" 的高度大于屏幕的高度的时候,子list可以吸顶,但是子list就无法继续滚动了

2020-07-08 09:51 负责人:DCloud_uniAD_HDX 分享
已邀请:
5***@qq.com

5***@qq.com - 个人

遇到同样的问题

a***@qq.com

a***@qq.com - amdp@qq.com

解决了吗?

猜码

猜码

遇到同样的问题

coderYzj

coderYzj

楼主,请问下这个解决了吗?

  • 闪到腰的咸鱼 (作者)

    建议你这边使用waterfall曲线救国

    2021-03-25 22:10

  • coderYzj

    回复 闪到腰的咸鱼: 试过了,waterfall的header设置position: sticky,header不在可是区域,会在吸附在屏幕最下方

    2021-03-25 22:16

2***@qq.com

2***@qq.com

最后是怎么解决的呢?

要回复问题请先登录注册