uni-app nvue下scroll-view 与页面滚动冲突

uni-app nvue下scroll-view 与页面滚动冲突

示例代码：

<template>  
    <view class="container">  
        <scroll-view class="margin-t20" style="height: 300upx;" scroll-y="true">  
                  <!-- 内容 -->  
                              。。。  
            </scroll-view>  
        <!--其他内容 -->  
    </view>  
</template>

操作步骤：

如上述nvue页面中添加内容

预期结果：

当整体页面内容过多产生页面滚动时，内部的scroll-view的上下滚动仍然生效

实际结果：

当整体页面内容过多产生页面滚动时，内部的scroll-view的上下滚动失效， 页面元素内容不足以产生页面滚动时，内部的scroll-view的上下滚动正常

bug描述：

当页面内容超出屏幕显示，产生滚动时，内部scroll-view的上下滚动就会失效。 代码示例如下：

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.7
手机系统 Android
手机系统版本号 Android 5.1
手机厂商 OPPO
手机机型 R9
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app nvue下scroll-view 与页面滚动冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

给scroll-view加固定高度，必须的

更多关于uni-app nvue下scroll-view 与页面滚动冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html


贴一下示例项目，方便我们查找原因

我加了固定高度，style=“height: 300upx;”

回复 2104_DLS: 怎么贴示例项目？我只找到粘贴代码

回复 平安一生0708: 上传附件

示例代码已上传，谢谢

示例项目

目前nvue的scroll-view暂时不支持嵌套滚动

明白了，多谢，页面内容超出一屏会自动在外层加scroll-view，对吗

回复 平安一生0708: 是这样

回复 DCloud_Android_ST: 好的，多谢

在nvue页面中，scroll-view与页面滚动确实存在冲突问题。这是由于nvue的渲染机制与vue页面不同，nvue基于原生渲染，滚动容器层级关系需要特别处理。

解决方案：

  1. 设置页面为不可滚动，将整个页面的滚动交给scroll-view：
.container {
    overflow: hidden;
}
  1. 或者使用list组件替代scroll-view，list组件在nvue中的滚动性能更好且冲突较少：
<list class="margin-t20" style="height: 300upx;">
    <cell v-for="item in list" :key="item.id">
        <!-- 内容 -->
    </cell>
</list>
  1. 如果必须使用scroll-view，可以尝试设置scroll-view的bounces属性为false：
<scroll-view class="margin-t20" style="height: 300upx;" scroll-y="true" bounces="false">
    <!-- 内容 -->
</scroll-view>
回到顶部