童小原
童小原
  • 发布:2021-07-27 18:49
  • 更新:2021-07-27 18:49
  • 阅读:717

【报Bug】nvue中swiper下@touchmove.stop失效,元素拖动触发swiper滚动

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.1.18

手机系统: Android

手机系统版本号: Android 9.0

手机厂商: 华为

手机机型: mumu模拟器

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

//swiper封装组件,主页面调用
<swiper style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;" :style="{height: screenHeight + 'px'}" :current="curIndex" @change="change">
<swiper-item>
<slot name="left"></slot>
</swiper-item>
<swiper-item>
<slot name="middle"></slot>
</swiper-item>
<swiper-item>
<slot name="right"></slot>
</swiper-item>
</swiper>
//视频播放封装组件,control-bar为控制条代码

<view >  
    <video ref="myVideo" id="myVideo" :src="src" :controls="false" enable-progress-gesture="false"  :show-center-play-btn="false" loop autoplay style="width: 750rpx;" :style="{height: screenHeight + 'px'}"  @play="onplay" @error="onerror" @timeupdate="timeupdate" @click="videoClick"></video>  
     <view v-if="!showControl" class="progress-bar-box">  
        <view class="progress-bar">  
            <view class="progress-bar-percent" :style="{width:percent*7.5 + 'rpx' }"></view>  
        </view>  
     </view>  
     <view class="control-bar" >  
        <text class="control-btn" @click="btnClick"></text>  
        <view class="control-line">  
            <view class="control-left"></view>  
            <view class="control-dot" @touchmove.stop.prevent="stopTouchMove"></view>  
            <view class="control-right"></view>  
        </view>  
        <text class="control-btn"></text>  
     </view>  
</view>  

操作步骤:

按照代码实现

预期结果:

拖动进度条swiper不切换,拖动其他控件swiper切换

实际结果:

拖动进度条swiper切换,获取部分touchmove事件数据

bug描述:

在swiper控件下放置video播放视频,想做一个进度条可以控制播放进度,但是拖动进度条触发swiper切换,在进度条上增加@touchmove.stop和@touchmove.stop.prevent无效

2021-07-27 18:49 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复