uni-app swiper 嵌套同方向 swiper，子 swiper 配置 disable-touch 后，ios下页面能正常左右滑动，安卓下不可以

uni-app swiper 嵌套同方向 swiper，子 swiper 配置 disable-touch 后，ios下页面能正常左右滑动，安卓下不可以

开发环境 版本号 项目创建方式
Mac macOS Big Sur 11.2.3 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：macOS Big Sur 11.2.3

HBuilderX类型：正式

HBuilderX版本号：3.2.6

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：MI 8

页面类型：nvue

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```html
<template>  
    <swiper style="flex:1;">  
        <swiper-item>  
            <text>parent0</text>  
        </swiper-item>  
        <swiper-item>  
            <view style="flex:1;background: green;">  
                <text>parent1</text>  
            </view>  
            <view style="flex:1;background: red;">  
                <swiper style="flex:1;" disable-touch>  
                    <swiper-item>  
                        <text>child1</text>  
                    </swiper-item>  
                    <swiper-item>  
                        <text>child2</text>  
                    </swiper-item>  
                    <swiper-item>  
                        <text>child3</text>  
                    </swiper-item>  
                </swiper>  
            </view>  
        </swiper-item>  
        <swiper-item>  
            <text>parent2</text>  
        </swiper-item>  
    </swiper>  
</template>

操作步骤： 新增nvue页面，真机运行即可

预期结果： 安卓和ios行为一致，允许左右滑动

实际结果： 安卓和ios行为不一致，安卓下左右滑动失败

bug描述： swiper 嵌套同方向 swiper，子 swiper 配置 disable-touch。ios下页面能正常左右滑动，安卓下不可以

附件：


更多关于uni-app swiper 嵌套同方向 swiper，子 swiper 配置 disable-touch 后，ios下页面能正常左右滑动，安卓下不可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

android 嵌套同向滑动视图时无法滚动这个问题暂时无法解决，uni文档中有说明的，禁止这样使用

更多关于uni-app swiper 嵌套同方向 swiper，子 swiper 配置 disable-touch 后，ios下页面能正常左右滑动，安卓下不可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app nvue 页面中 Swiper 组件的平台差异问题。在 Android 平台上，当父级 Swiper 嵌套同方向且设置了 disable-touch 的子 Swiper 时，触摸事件传递会出现异常，导致父级 Swiper 无法响应滑动。

问题核心：Android 系统的触摸事件传递机制与 iOS 不同，disable-touch 属性在 Android 上可能完全阻断了父子 Swiper 之间的触摸事件交互。

临时解决方案（二选一）：

  1. 移除子 Swiper 的 disable-touch 属性，改用 CSS 或样式禁止其滑动：

    <swiper style="flex:1;" :current="fixedCurrent" @change="onChildSwiperChange">

    在 script 中固定 current 值并阻止 change 事件：

    export default {
    data() {
        return {
            fixedCurrent: 0
        }
    },
    methods: {
        onChildSwiperChange(e) {
            // 强制回滚到固定页面，实现禁止滑动效果
            this.$nextTick(() => {
                this.fixedCurrent = 0;
            });
        }
    }
}

  2. 使用条件编译针对平台处理：

    <!-- #ifdef APP-PLUS -->
<swiper style="flex:1;" :disable-touch="isAndroid ? false : true">
<!-- #endif -->
回到顶部