uni-app 在vue3中,uni.pageScrollTo selector 接口执行后不会滚动到相应位置，相应位置距离窗口顶部还有大概60px的距离

uni-app 在vue3中,uni.pageScrollTo selector 接口执行后不会滚动到相应位置，相应位置距离窗口顶部还有大概60px的距离

示例代码：

scroll_view(e){
    var t=this
    t.scroll_num=e  

    uni.pageScrollTo({  
        selector:'#scroll_id_'+e,  
        duration: 100,  
    })  
},

操作步骤：

scroll_view(e){
    var t=this
    t.scroll_num=e  

    uni.pageScrollTo({  
        selector:'#scroll_id_'+e,  
        duration: 100,  
    })  
},

预期结果：

应该滚动顶部

实际结果：

相差60px

bug描述：

版本3.3.31 是对的，但是3.4.7 就错误了
在pages.json 里配置 “navigationStyle”: "custom"后，页面上的 uni.pagescrollTo selector 就会少了44个像素，
如果开启顶部标题栏，则正常，


更多关于uni-app 在vue3中,uni.pageScrollTo selector 接口执行后不会滚动到相应位置，相应位置距离窗口顶部还有大概60px的距离的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请查看源代码

更多关于uni-app 在vue3中,uni.pageScrollTo selector 接口执行后不会滚动到相应位置，相应位置距离窗口顶部还有大概60px的距离的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大佬解决这个问题了吗

在 uni-app 中使用 uni.pageScrollTo 接口时，如果发现页面滚动后目标位置距离窗口顶部还有大约 60px 的偏移，可能是由于以下几个原因导致的：

1. 导航栏高度

  • 在 uni-app 中，默认情况下，页面顶部会有一个导航栏（Navigation Bar），导航栏的高度通常为 44px 或 60px（具体高度取决于设备和平台）。uni.pageScrollTo 的 selector 选项会将目标元素滚动到窗口顶部，但不会考虑导航栏的高度，因此可能会出现偏移。
  • 解决方案：你可以通过 offset 参数来手动调整滚动的位置。例如，如果导航栏高度为 60px，你可以将 offset 设置为 -60，这样目标元素就会滚动到导航栏下方。
uni.pageScrollTo({
  selector: '#targetElement',
  offset: -60, // 根据导航栏高度调整
  duration: 300
});

2. CSS 样式问题

  • 目标元素可能受到 CSS 样式的影响，例如 padding、margin 或 position 等属性，导致实际位置与预期位置不一致。
  • 解决方案：检查目标元素的 CSS 样式，确保没有额外的 padding 或 margin 影响滚动位置。

3. 页面布局变化

  • 如果页面布局在滚动时发生变化（例如动态加载内容或元素高度变化），可能会导致滚动位置不准确。
  • 解决方案：确保在调用 uni.pageScrollTo 之前，页面布局已经稳定，或者使用 setTimeout 延迟执行滚动操作。

4. 平台差异

  • 不同平台（如 iOS 和 Android）可能会有不同的默认行为，导致滚动位置不一致。
  • 解决方案：根据平台差异调整 offset 值，或者使用 uni.getSystemInfoSync() 获取导航栏高度并动态调整 offset。

5. 使用 scrollTop 替代 selector

  • 如果你知道目标元素的具体 scrollTop 值，可以直接使用 scrollTop 参数来精确控制滚动位置。
uni.pageScrollTo({
  scrollTop: 500, // 目标元素的 scrollTop 值
  duration: 300
});

6. 检查 selector 是否正确

  • 确保 selector 参数指定的元素存在且唯一，否则可能会导致滚动失败或滚动到错误的位置。

示例代码

uni.pageScrollTo({
  selector: '#targetElement',
  offset: -60, // 根据导航栏高度调整
  duration: 300
});
回到顶部