uni-app nvue自定义导航栏 sticky 设置top值无效

uni-app nvue自定义导航栏 sticky 设置top值无效

示例代码:

nvue自定义导航栏 sticky 设置top值无效  

操作步骤:

nvue自定义导航栏 sticky 设置top值无效  

预期结果:

nvue自定义导航栏 sticky 设置top值无效  

实际结果:

正常使用  

bug描述:

nvue自定义导航栏 sticky 设置top值无效  
信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 windows10
HBuilderX类型 正式
HBuilderX版本 4.66
手机系统 Android
手机系统版本 Android 16
手机厂商 华为
手机机型 华为nova10
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app nvue自定义导航栏 sticky 设置top值无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

其他端有问题吗?页面类型改为vue试试呢?

更多关于uni-app nvue自定义导航栏 sticky 设置top值无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


回复 冬眠: 可以考虑使用vue解决,nvue现在已经不再持续迭代了,有性能方面的要求可以考虑uniapp x

在 nvue 页面中,sticky 布局的 top 值设置无效通常与页面结构和样式配置有关。nvue 使用原生渲染,其布局机制与普通 vue 页面存在差异。

检查以下要点:

  1. 确保 sticky 元素为 flex 布局的直接子元素,nvue 默认使用 flex 布局
  2. 确认 sticky 样式正确应用:
.sticky-element {
  position: sticky;
  top: 0px; /* 确保单位完整 */
}
回到顶部