coderH

发布：2024-10-28 13:43
更新：2024-10-28 16:52
阅读：131

【报Bug】app中使用position: sticky;无法一直固定在顶部

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows11

HBuilderX类型：正式

HBuilderX版本号： 4.29

手机系统： Android

手机系统版本号： Android 10

手机厂商：模拟器

手机机型： Pixel

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

固定顶部无效代码

<template>  
  <view style="position: sticky; top: 0"></view>  
  <view style="height: 2000px"></view>  
</template>

固定顶部有效代码

<template>  
  <view>  
     <view style="position: sticky; top: 0"></view>  
     <view style="height: 2000px"></view>  
  </view>  
</template>

预期结果：

最外层不使用view包裹能固定在顶部

实际结果：

需要包裹view才能固定在顶部

bug描述：

如果position: sticky;所在的元素没有父元素存在的话，那么该布局只会在一块屏幕高度区域内滑动有效，若滑动区域超过当前屏幕高度sticky属性的元素会出现跟随移出屏幕外面

2024-10-28 13:43 负责人:无分享

1 个回复

爱豆豆 - 办法总比困难多

确实如此
可能是页面上多个根标签影响到了 page的高度只有一屏高度
当page设置跟内容一样高时又可以固定上了

page {  
    min-height: 2000px;  
}

或者


page {  
    height: auto;  
}

coderH (作者)

治标不治本还得他们自己解决

2024-10-28 17:21
爱豆豆

回复 coderH: 是的根源上的问题还是得官方的人改

2024-10-28 17:26

要回复问题请先登录或注册

【报Bug】app中使用position: sticky;无法一直固定在顶部

预期结果：

最外层不使用view包裹能固定在顶部

实际结果：

需要包裹view才能固定在顶部

bug描述：

1 个回复

公告

相关问题

【报Bug】app中使用position: sticky;无法一直固定在顶部

操作步骤： 固定顶部无效代码 <template> <view style="position: sticky; top: 0"></view> <view style="height: 2000px"></view> </template> 固定顶部有效代码 <template> <view> <view style="position: sticky; top: 0"></view> <view style="height: 2000px"></view> </view> </template>

预期结果： 最外层不使用view包裹能固定在顶部

实际结果： 需要包裹view才能固定在顶部

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

预期结果：

最外层不使用view包裹能固定在顶部

实际结果：

需要包裹view才能固定在顶部