<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>

- 发布:2025-07-23 19:25
- 更新:2025-07-23 19:25
- 阅读:39
产品分类: 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
示例代码:
操作步骤:
使用ios开发一个预览视频的弹窗组件,添加下滑关闭页面的需求
使用ios开发一个预览视频的弹窗组件,添加下滑关闭页面的需求
预期结果:
下滑关闭可以正常执行,视频控件的操作可以正常使用
下滑关闭可以正常执行,视频控件的操作可以正常使用
实际结果:
下滑关闭可以执行,但是视频控件不能进行暂停,播放,或者拖动进度条
下滑关闭可以执行,但是视频控件不能进行暂停,播放,或者拖动进度条
bug描述:
当前ios手机在nvue页面使用video组件,在父元素添加touch的事件会导致video组件本身的控件里面的暂停,拖动滚动条不可使用
0 个回复