uni-app框架的swiper-list组件模板无法正常上下滚动

uni-app框架的swiper-list组件模板无法正常上下滚动

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

操作步骤：

<cell>  
<!-- 这个区域内容变多 一屏装不下的时候 -->  
            <view id="head" class="header">  
                <text class="header-title">header</text>  
            </view>  
   </cell>  
<!-- 以下代码 正常  -->  
<cell>  
            <view class="tabs" :style="'height:' + pageHeight + 'px'">  
                <scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true"  
                    :show-scrollbar="false" :scroll-into-view="scrollInto">  
                    <view style="flex-direction: column;">  
                        <view style="flex-direction: row;">  
                            <view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" :ref="'tabitem'+index"  
                                :data-id="index" :data-current="index" @click="ontabtap">  
                                <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>  
                            </view>  
                        </view>  
                        <view class="scroll-view-indicator">  
                            <view ref="underline" class="scroll-view-underline" :class="isTap ? 'scroll-view-animation':''"  
                                :style="{left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px'}"></view>  
                        </view>  
                    </view>  
                </scroll-view>  
                <view class="tab-bar-line"></view>  
                <swiper class="tab-view" ref="swiper1" id="tab-bar-view" :current="tabIndex" :duration="300" @change="onswiperchange"  
                    @transition="onswiperscroll" @animationfinish="animationfinish" @onAnimationEnd="animationfinish">  
                    <swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index">  
                        <swiper-page class="swiper-page" :pid="page.pageid" :parentId="pageId" ref="page"></swiper-page>  
                    </swiper-item>  
                </swiper>  
            </view>  
        </cell>

预期结果：

<p>header区域内容多少 不影响下方swiper中的区域上下滚动</p>

实际结果：

<p>header区域内容多 下方swiper不能正常上下滚动</p>

bug描述：

<p>使用演示uni-app框架的组件模板中 使用swiper-list nvue模板 当header区域内容特别多，下方swiper 向上拉动 页面会卡死 页面只可下拉不可上拉 需要点击tab切换下 就变正常了 </p>

更多关于uni-app框架的swiper-list组件模板无法正常上下滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

更新到HBuilderX alpha 3.2.7看下是否还有此问题？ 查看相关问题：https://ask.dcloud.net.cn/question/128578

更多关于uni-app框架的swiper-list组件模板无法正常上下滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的 谢谢 我试下

问题分析：

根据提供的代码和描述，这是一个典型的 swiper-list 在 nvue 页面中的滚动冲突问题。核心原因在于 swiper-list 的嵌套滚动机制与 swiper 组件内部的 scroll-view 或列表组件（如 list、recycle-list）产生了冲突。

具体原因：

  1. 嵌套滚动冲突：swiper-list 本身是一个可垂直滚动的容器。其内部的 swiper 组件中的每个 swiper-item 通常也包含一个可滚动的列表（如 list 或 scroll-view）。当 header 区域内容增多时，swiper-list 的滚动区域被压缩，导致 swiper 内部的列表组件在尝试滚动时，手势事件可能被父级 swiper-list 拦截或混淆。
  2. 手势方向判断：在 nvue 中，嵌套的滚动容器对手势的方向判断可能不准确。当用户尝试在 swiper 内部的列表上垂直滚动时，如果起始位置靠近 swiper 边缘或 header 区域，系统可能误判为意图触发 swiper 的横向切换或父级 swiper-list 的垂直滚动，从而导致滚动卡顿或失效。
  3. 组件渲染差异：nvue 与 vue 页面的渲染机制不同（前者使用原生渲染，后者使用 WebView 渲染）。在 nvue 中，嵌套滚动容器的处理更为严格，容易引发此类冲突。

解决方案：

  1. 使用 list 替代 swiper-list：

    • 如果不需要 swiper-list 的预渲染和自动高度调整特性，建议改用 list 组件作为外层容器。
    • 将 header 区域作为 list 的 header 组件（<list><header>...</header><cell>...</cell></list>），这样 header 会自然融入列表的滚动流，避免嵌套滚动冲突。

  2. 调整 swiper 内部列表的滚动模式：

    • 确保 swiper 内部的每个 swiper-item 中的列表组件（如 list 或 scroll-view）设置为可滚动（scrollable="true"）。
    • 尝试为内部的 list 组件设置 scroll-y 为 true，并明确指定高度（如 :style="{height: innerHeight + 'px'}"），通过计算 innerHeight（页面总高度减去 header 和 tab 栏的高度）来确保滚动区域正确。

  3. 使用 scroll-view 包裹 swiper（谨慎使用）：

    • 将 swiper 组件包裹在一个 scroll-view 中，但此方案可能引入新的滚动冲突，需严格测试：
      <cell>
    <view id="head" class="header">...</view>
    <scroll-view scroll-y :style="'height:' + scrollHeight + 'px'">
        <view class="tabs">...</view> <!-- 包含 swiper 的部分 -->
    </scroll-view>
</cell>
回到顶部