uni-app nvue 页面swiper-item里面嵌套scroll-view，滑到底部swiper不能切换

uni-app nvue 页面swiper-item里面嵌套scroll-view，滑到底部swiper不能切换

示例代码：

<swiper class="_goods_swiper" :vertical="true" :style="{height: scrollHeight}" :autoplay="false" :circular="false" :current="goodsPage" :duration="800" @change="goodsPageChange">    
    <swiper-item :style="{height: scrollHeight}">    
        <!-- 第一栏滚动 -->    
        <scroll-view scroll-y="true" :style="{height: scrollHeight}" :show-scrollbar="false" @scroll="scrollHandle">    
            ………    
        </scroll-view>    
    </swiper-item>    
    <swiper-item :style="{height: scrollHeight}">    
        <!-- 第二栏内容 -->    
    </swiper-item>    
</swiper>    

computed() {    
    scrollHeight() {    
        return uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight    
    }    
}

操作步骤：

<swiper class="_goods_swiper" :vertical="true" :style="{height: scrollHeight}" :autoplay="false" :circular="false" :current="goodsPage" :duration="800" @change="goodsPageChange">    
    <swiper-item :style="{height: scrollHeight}">    
        <!-- 第一栏滚动 -->    
        <scroll-view scroll-y="true" :style="{height: scrollHeight}" :show-scrollbar="false" @scroll="scrollHandle">    
            ………    
        </scroll-view>    
    </swiper-item>    
    <swiper-item :style="{height: scrollHeight}">    
        <!-- 第二栏内容 -->    
    </swiper-item>    
</swiper>    

computed() {    
    scrollHeight() {    
        return uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight    
    }    
}

预期结果：

嵌套了scroll-view的swiper-item可以滑动到下一个swiper-item

实际结果：

不能顺利的滑动到下一个swiper-item

bug描述：

nvue 页面swiper-item里面嵌套scroll-view，swiper-item标签和scroll-view标签的高度相等，scroll-view滑到底部之后swiper就不能切换到下一个了

附件

bug.zip


更多关于uni-app nvue 页面swiper-item里面嵌套scroll-view，滑到底部swiper不能切换的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

不允许相同方向的 swiper 或者 scroll-view 互相嵌套，换句话说就是嵌套的必须是不同的方向。

更多关于uni-app nvue 页面swiper-item里面嵌套scroll-view，滑到底部swiper不能切换的实战教程也可以访问 https://www.itying.com/category-93-b0.html


亲，您报bug的姿势好像不对哦，详情：https://ask.dcloud.net.cn/article/38139

那要什么样的姿势

回复 闪到腰的咸鱼: 必要的情况下，没有提供能复现bug的demo。或者demo不完整无法直接运行代码的片段。

回复 DCloud_uniCloud_JSON: 已经上传了一个小demo，帮忙看看，大哥

这是nvue页面中swiper和scroll-view嵌套使用时常见的滚动冲突问题。解决方案如下：

  1. 在scroll-view上添加@touchstart.native.stop和@touchend.native.stop事件阻止冒泡：
<scroll-view 
  scroll-y="true" 
  :style="{height: scrollHeight}" 
  @touchstart.native.stop 
  @touchend.native.stop
  @scroll="scrollHandle">
  ...
</scroll-view>
  1. 或者使用[@touchmove](/user/touchmove).stop阻止触摸事件传播：
<scroll-view 
  scroll-y="true" 
  :style="{height: scrollHeight}" 
  [@touchmove](/user/touchmove).stop
  @scroll="scrollHandle">
  ...
</scroll-view>
  1. 也可以尝试在scroll-view外层包裹view，并设置[@touchmove](/user/touchmove).stop：
<swiper-item>
  <view [@touchmove](/user/touchmove).stop>
    <scroll-view>...</scroll-view>
  </view>
</swiper-item>
回到顶部