<template>
<view style="background: red;">
<swiper style='height: 300rpx;'>
<swiper-item>
<view>
<swiper vertical style='height: 150rpx;background: red;'>
<swiper-item>
<view style='height: 150rpx;background: green;'>在安卓端，绿色swiper部分只能上下滑动，不能左右滑动（快手、微信、抖音、H5 并无此问题）</view>
</swiper-item>
<swiper-item>
<view style='height: 150rpx;background: green;'>在安卓端，绿色swiper部分只能上下滑动，不能左右滑动（快手、微信、抖音、H5 并无滑动问题）</view>
</swiper-item>
</swiper>
<view>而安卓端触摸这里，才能左右滑动</view>
<view>而安卓端触摸这里，才能左右滑动</view>
<view>而安卓端触摸这里，才能左右滑动</view>
<view>而安卓端触摸这里，才能左右滑动</view>
<view>而安卓端触摸这里，才能左右滑动</view>
</view>
</swiper-item>
<swiper-item>
<view style='height: 100rpx;background: gray;'>如果没有嵌套swiper，是正常的 可以左右滑动的</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
</script>
<style>
/* #ifdef MP-KUAISHOU */
swiper-item {
position: relative;
}
/* #endif */
</style>
菜汤不甜
- 发布：2024-05-11 01:20
- 更新：2024-07-05 09:40
- 阅读：181
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 专业版
HBuilderX类型： 正式
HBuilderX版本号： 4.15
手机系统： Android
手机系统版本号： Android 7.1.1
手机厂商： 华为
手机机型： VOG-AL10
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
在nvue的页面中，输入代码示例
在nvue的页面中，输入代码示例
预期结果：
希望在app端，用户左右滑动内部的swiper时，能触发外部的swiper的左右切换
希望在app端，用户左右滑动内部的swiper时，能触发外部的swiper的左右切换
实际结果：
在nvue下，运行于安卓，用户左右滑动内部的垂直swiper，无法触发外部横向的swiper滑动
在nvue下，运行于安卓，用户左右滑动内部的垂直swiper，无法触发外部横向的swiper滑动
bug描述：
想实现像抖音首页那样，可以上下刷视频，并且能左右滑动切换栏目的效果
于是使用 两个 swiper 进行嵌套，
嵌套结构为：
先建立一个<swiper>，在其中第一个<swiper-item>中，又建立<swiper>
外部的<swiper>设置为左右滑动
<swiper-item>里的<swiper>设置为上下滑动
用nvue页面，运行与H5和小程序并没有异常 符合需求
而运行于安卓端，出现了，用户左右滑动内部<swiper>的时候，无法触发外部swiper的左右滑动
菜汤不甜 (作者)
触摸的时候，得非常的靠近左右边，是可以引起左右滑动的
2024-06-29 00:31