uni-app .nvue <List></List> 或者 overflow-y: scroll 在小米 澎湃系统上无法滚动，vue就正常滚动

发布于 1周前 作者 itying888 来自 uni-app

uni-app .nvue <List></List> 或者 overflow-y: scroll 在小米 澎湃系统上无法滚动，vue就正常滚动

操作步骤

使用小米澎湃系统 页面使用 .nvue <List></List> 或者 overflow-y: scroll 无法滚动

预期结果

可以正常滚动

实际结果

无法滚动

bug描述

.nvue <List></List> 或者 overflow-y: scroll 在小米 澎湃系统上无法滚动，vue就正常滚动

开发环境及版本信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式
HBuilderX Mac macOS 12.6.3 正式 4.03 Android Android 14 小米 1.0.31.UNCCNXM nvue vue3 云端

Harmonyos Next教程
15 回复

scrollable属性设置成true就可以啦，参考文档


设置了还是不能滚动

<list class=“scroll-v list” enableBackToTop=“true” scrollable=“true” scroll-y

回复 助赢: :scrollable=“true” ，前边加一个冒号，我试了可以滚动

回复 JXWang: 还是不行，如果不是nvue 可以滚动，如果是nuve 并且使用小米自己的系统小米澎湃系统就不能滚动，别的机型正常

回复 JXWang: 我是有放在swiper里面，会不会是这个影响到的呢？

回复 助赢: 上传一下完整代码我看看吧

回复 助赢: demo 就行，不用上传这么详细的代码，我看一下

回复 助赢: 其他的安卓手机试过吗？其他安卓手机可以吗，或者升级到澎湃os最新版本系统试试

回复 JXWang: 其他的安卓手机和ios手机都是正常的 就小米那个不行，一会试下升级澎湃OS看看

回复 JXWang: 刚查了手机 小米澎湃OS已经是最新的了

回复 助赢: 你好这个问题解决了么

小米9上面也无法滚动 用的nvue list组件

list组件所在位置不能超出当前屏幕，超出了就无法滚动，真的坑

在针对特定系统（如小米澎湃系统）上遇到uni-app中.nvue页面的滚动问题时，通常是由于原生组件渲染或系统兼容性问题导致的。在.nvue页面中，<List>组件和CSS属性overflow-y: scroll的表现可能会受到系统层面的影响。以下是一些可能的解决方案和代码示例，帮助你尝试解决这个问题。

1. 使用<scroll-view>组件

在.nvue页面中，推荐使用<scroll-view>组件来实现滚动效果，因为该组件是专为滚动设计的，并且与原生组件的兼容性更好。

<template>
  <page>
    <scroll-view scroll-y="true" style="height: 100%;">
      <div v-for="item in items" :key="item.id" style="height: 50px; border-bottom: 1px solid #ccc;">
        {{ item.name }}
      </div>
    </scroll-view>
  </page>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 20 }, (_, i) => ({ id: i, name: `Item ${i + 1}` }))
    };
  }
};
</script>

2. 调整CSS样式

如果overflow-y: scroll在特定系统上不起作用，可以尝试调整其他CSS属性，如height、flex等，确保内容区域有足够的空间来触发滚动。

<template>
  <div class="container">
    <div class="scrollable-content">
      <div v-for="item in items" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  height: 100%;
}
.scrollable-content {
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 启用平滑滚动 */
}
.item {
  height: 50px;
  border-bottom: 1px solid #ccc;
}
</style>

3. 检查系统兼容性

如果上述方法均无效，可能需要检查小米澎湃系统的具体版本和uni-app的兼容性文档，确认是否存在已知的系统兼容性问题。此外，也可以尝试在小米开发者社区或uni-app社区中搜索类似问题，看是否有其他开发者遇到并解决了相同的问题。

总之，针对特定系统的兼容性问题，通常需要通过调整代码和组件使用方式，或者等待官方修复来解决。希望上述代码示例能帮助你找到解决问题的方向。

回到顶部