1***@qq.com
1***@qq.com
  • 发布:2025-07-23 19:25
  • 更新:2025-07-23 19:25
  • 阅读:39

【报Bug】当前ios手机在nvue页面使用video组件,在父元素添加touch的事件会导致video组件本身的控件里面的暂停,拖动滚动条不可使用

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: MacBook Pro (Retina, 15-inch, Mid 2014)

HBuilderX类型: 正式

HBuilderX版本号: 4.45

手机系统: iOS

手机系统版本号: iOS 17

手机厂商: 苹果

手机机型: iphone 12

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view style="width: 750rpx;height: 1400rpx;background: rgba(0,0,0,0.8);"  
          @touchstart="onTouchStart"  
          @touchmove="onTouchMove"  
          @touchend="onTouchEnd"  
    >  
        <swiper :current="current" @change="onChange" style="width: 750rpx;height: 1100rpx;background: #00B18A">  
            <swiper-item>  
                <video  
                    :src="url"  
                    :poster="coverUrl"  
                    :controls="true"  
                    :autoplay="false"  
                    :show-fullscreen-btn="false"  
                    :show-play-btn="true"  
                    :show-center-play-btn="true"  
                    :enable-progress-gesture="false"  
                    :object-fit="'contain'"  
                    :http-cache="true"  
                    :play-strategy="0"  
                    class="preview-video"  
                    style="background: #0a7aff"  
                />  
            </swiper-item>  
            <swiper-item>  
                <video  
                    :src="url2"  
                    :poster="coverUrl2"  
                    :controls="true"  
                    :autoplay="false"  
                    :show-fullscreen-btn="false"  
                    :show-play-btn="true"  
                    :show-center-play-btn="true"  
                    :enable-progress-gesture="false"  
                    :object-fit="'contain'"  
                    :http-cache="true"  
                    :play-strategy="0"  
                    class="preview-video"  
                    style="background: #ff0afb;margin-top: 200rpx"  

                />  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
    export default {  
        data(){  
            return{  
                url:'',  
                coverUrl:'',  
                url2:'',  
                coverUrl2:'',  
                current:0,  
            }  
        },  
        methods:{  
            onTouchStart(e){  
                console.log('《Debug》----> onTouchStart 111 = ', e);  
            },  
            onTouchMove(){  
                console.log('《Debug》----> onTouchMove 2222 = ', 2222);  
            },  
            onTouchEnd(){  
                console.log('《Debug》----> onTouchEnd 32323 = ', 32323);  
            },  
            onChange(e){  
                this.current = e.detail.current;  
            },  
        }  
    }  

</script>  

<style>  

    .preview-video{  
        width: 600rpx;  
        height: 600rpx;  
    }  

</style>

操作步骤:

使用ios开发一个预览视频的弹窗组件,添加下滑关闭页面的需求

预期结果:

下滑关闭可以正常执行,视频控件的操作可以正常使用

实际结果:

下滑关闭可以执行,但是视频控件不能进行暂停,播放,或者拖动进度条

bug描述:

当前ios手机在nvue页面使用video组件,在父元素添加touch的事件会导致video组件本身的控件里面的暂停,拖动滚动条不可使用

2025-07-23 19:25 负责人:无 分享
已邀请:

要回复问题请先登录注册