uni-app nvue页面不使用list组件时，页面高度超出屏幕无法向下滑动

uni-app nvue页面不使用list组件时，页面高度超出屏幕无法向下滑动

测试过的手机

  • 华为nova8
  • Apple 12

示例代码：

<template>
    <view v-for="item in 100" :key="item">  
        <text>{{item}}</text>     
    </view>  
</template>

操作步骤：

  1. 创建nvue页面，粘贴以下代码

预期结果：

  • 页面可正常滚动

实际结果：

  • 页面无法滚动

bug描述：

  • nvue页面不使用list的话，页面高度超出屏幕无法向下滑动


| 开发环境               | 版本号   | 项目创建方式 |
|----------------------|--------|-------------|
| Windows              | win10  | HBuilderX   |
| HBuilderX            | 3.4.7  |             |
| 手机系统              |        | 全部        |
| 手机厂商              |        | 华为        |
| 页面类型              |        | nvue        |
| vue版本               |        | vue2        |
| 打包方式              |        | 云端        |

更多关于uni-app nvue页面不使用list组件时，页面高度超出屏幕无法向下滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

Android 11 Redmi K40和IOS15，iPhone 6s Plus测试，均为复现此问题，你换其他设备是否正常？ 请提供简单可复现的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app nvue页面不使用list组件时，页面高度超出屏幕无法向下滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


重新打包自定义基座就好了

在 uni-app 的 nvue 页面中，如果页面内容超出了屏幕高度，默认情况下是无法滚动的。这是因为 nvue 页面的布局方式与传统的 web 页面不同，它默认使用 flex 布局，并且没有默认的滚动行为。

要使 nvue 页面可以滚动，你可以使用以下几种方法：

1. 使用 scroll-view 组件

scroll-view 是一个可以滚动的容器组件，你可以将页面内容包裹在 scroll-view 中，这样页面内容超出屏幕时就可以滚动了。

<template>
  <scroll-view scroll-y="true" style="height: 100vh;">
    <!-- 页面内容 -->
    <view v-for="item in 100" :key="item">Item {{ item }}</view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

2. 使用 list 组件

如果你有大量的列表项，可以使用 list 组件，它本身支持滚动。

<template>
  <list>
    <cell v-for="item in 100" :key="item">
      <view>Item {{ item }}</view>
    </cell>
  </list>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

3. 使用 page 组件的 scroll 属性

在 nvue 中，page 组件本身也支持滚动，你可以通过设置 page 的 scroll 属性来启用滚动。

<template>
  <page scroll-y="true">
    <!-- 页面内容 -->
    <view v-for="item in 100" :key="item">Item {{ item }}</view>
  </page>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

4. 使用 flex 布局和 overflow 属性

如果你希望使用 flex 布局并且让页面内容可以滚动，可以设置 flex 容器的 overflow 属性为 scroll 或 auto。

<template>
  <view style="flex: 1; overflow: auto;">
    <!-- 页面内容 -->
    <view v-for="item in 100" :key="item">Item {{ item }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

5. 使用 webview 组件

如果你需要在 nvue 页面中嵌入一个 webview，webview 本身是支持滚动的。

<template>
  <webview src="https://www.example.com" style="flex: 1;"></webview>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>
回到顶部