uni-app list相互嵌套时，子list在安卓端自动吸顶【完整工程包】【bug视频实例】

uni-app list相互嵌套时，子list在安卓端自动吸顶【完整工程包】【bug视频实例】

操作步骤：

  • 直接访问就行了

预期结果：

  • 安卓端（红米）不会自动吸顶

实际结果：

  • 安卓端（红米）会自动吸顶

bug描述：

  • list相互嵌套时，子list在安卓端自动吸顶
  • bug视频

附件：


更多关于uni-app list相互嵌套时，子list在安卓端自动吸顶【完整工程包】【bug视频实例】的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app list相互嵌套时，子list在安卓端自动吸顶【完整工程包】【bug视频实例】的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 在 Android 端的渲染兼容性问题。当使用 list 组件嵌套时，子 list 在部分 Android 机型上可能会触发非预期的吸顶效果。

主要原因：
Android 端 WebView 对 position: sticky 或相关滚动布局的处理机制与 iOS 存在差异，嵌套滚动容器时容易引发布局错乱。

建议解决方案：

  1. 避免多层 list 嵌套：尝试重构布局，使用 scroll-view 替代内层 list，并手动控制滚动区域。
  2. 检查样式：确保子 list 的父容器未设置 overflow: hidden 或 position: fixed 等可能影响定位的属性。
  3. 使用 uni-app 官方组件：若需吸顶功能，建议直接使用 uni-sticky 组件，并明确指定吸顶条件，避免依赖默认行为。
  4. 条件编译：针对 Android 端单独处理样式或使用 scroll-view 替代嵌套 list。

临时修复示例（通过条件编译调整 Android 端样式）：

<template>
  <view>
    <!-- 外层 list -->
    <list>
      <!-- 内层容器 -->
      <view :class="{ 'android-fix': isAndroid }">
        <!-- 内层 list 或替换为 scroll-view -->
        <scroll-view v-if="isAndroid" scroll-y>
          <!-- 内容 -->
        </scroll-view>
        <list v-else>
          <!-- 内容 -->
        </list>
      </view>
    </list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isAndroid: uni.getSystemInfoSync().platform === 'android'
    }
  }
}
</script>

<style>
.android-fix {
  position: relative;
  z-index: 1;
}
</style>
回到顶部