uni-app 在nvue页面中,有页面级滚动，并且滚动到list组件时组件内容没有滚动，只有页面级滚动

uni-app 在nvue页面中,有页面级滚动，并且滚动到list组件时组件内容没有滚动，只有页面级滚动

2 回复

android平台nvue页面目前不支复杂的滚动嵌套。可以看下swiper-list能否实现你的要求

更多关于uni-app 在nvue页面中,有页面级滚动，并且滚动到list组件时组件内容没有滚动，只有页面级滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中，页面级滚动与组件内部滚动冲突是常见问题。这是因为 nvue 默认启用页面级滚动，而 <list> 组件本身具有独立的滚动容器。当页面滚动到 list 区域时，触摸事件会被页面级滚动捕获，导致 list 无法响应滚动。

解决方案：

  1. 禁用页面级滚动，改用 <scroll-view>
    将整个页面内容包裹在 <scroll-view> 中，并设置高度为 100%。这样页面滚动由 <scroll-view> 接管，list 组件可以正常响应内部滚动。

  2. 使用 scrollable 属性（仅限 Android）
    在 list 组件上添加 scrollable="false" 属性，可以禁用其自身滚动，但此属性在 iOS 上无效。

  3. 动态切换滚动控制（复杂场景）
    通过监听页面滚动位置，当进入 list 区域时，动态禁用页面滚动并启用 list 滚动。这需要结合 pageScrollTo 和自定义事件实现，但实现复杂度较高。

推荐方案：
对于大多数场景，建议使用方案1。将页面结构改为：

<scroll-view style="height: 100vh;" scroll-y>
  <!-- 其他内容 -->
  <list> <!-- list 组件内部可正常滚动 --> </list>
</scroll-view>
回到顶部