uni-app页面滚动后特定区域无法继续滚动

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app页面滚动后特定区域无法继续滚动

页面滚动后区域无法滚动

<view>  
    <view style="background-color:blue;opacity: 0.3;" :style="{height:screenHeight*0.6 'px'}">  
        <text style="color:red;">其他高度</text>  
    </view>  
    <!-- 这里的高度改为screenHeight*0.4 就可以区域滚动，但是页面无法滚动，因为高度等于screenHeight -->  
    <view :style="{height:screenHeight*0.5 'px'}" style="border:1px solid yellow">  
        <view>  
            <!-- 这里list换成scrollview一样 -->  
            <list :style="{height:screenHeight 'px'}">  
                <!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->  
                <cell v-for="(item, index) in 162" :key="'index' + index">  
                    <text style="color:red;">dasfsa {{item}}</text>  
                </cell>  
            </list>  
        </view>  
    </view>  
</view>

Harmonyos Next教程
1 回复

在开发uni-app应用时，如果遇到页面滚动后特定区域（如一个嵌套的滚动视图）无法继续滚动的问题，通常是因为外部滚动视图（页面滚动）和内部滚动视图（特定区域滚动）之间的滚动冲突。这种情况经常发生在嵌套了<scroll-view>组件的场景中。

为了解决这个问题，可以通过设置适当的CSS样式和组件属性来控制滚动行为。以下是一个简化的代码示例，展示如何在uni-app中实现内外滚动视图的正常工作。

示例代码

页面结构（pages/index/index.vue）

<template>
  <view class="container">
    <!-- 页面滚动区域 -->
    <scroll-view scroll-y="true" class="page-scroll">
      <view class="content">
        <!-- 其他内容 -->
        <view v-for="i in 20" :key="i" class="item">Item {{ i }}</view>
        
        <!-- 嵌套滚动区域 -->
        <scroll-view scroll-y="true" class="nested-scroll">
          <view class="nested-content">
            <view v-for="j in 10" :key="j" class="nested-item">Nested Item {{ j }}</view>
          </view>
        </scroll-view>
      </view>
    </scroll-view>
  </view>
</template>

<style>
.container {
  height: 100vh;
  overflow: hidden; /* 防止页面级别的滚动条出现 */
}

.page-scroll {
  height: 100%;
}

.content {
  padding: 20px;
}

.item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}

.nested-scroll {
  height: 200px; /* 固定高度，确保内部可以滚动 */
  margin-top: 20px;
  border: 1px solid #000;
}

.nested-content {
  height: 100%;
  overflow: auto; /* 确保内容溢出时可以滚动 */
}

.nested-item {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #000;
}
</style>

说明

  1. 外部<scroll-view>：设置scroll-y="true"允许纵向滚动，并设置height: 100%使其占满整个页面高度。
  2. 内部<scroll-view>：同样设置scroll-y="true"，并指定一个固定的高度（如200px），以确保内容超出这个高度时可以滚动。
  3. CSS样式：使用overflow: hidden防止页面级别的滚动条干扰，内部滚动视图则通过overflow: auto允许内容溢出时滚动。

通过这种方式，你可以确保外部滚动视图和内部滚动视图都能正常工作，不会出现滚动冲突的问题。

回到顶部