<template>
<view class='page'>
<swiper class='swiper' vertical>
<swiper-item class='swiper-item' v-for='item in list'>
<video class='video' :src='item.url' disable-touch></video>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
list: []
}
},
onLoad() {
this.$nextTick(() => {
this.getList()
})
},
methods: {
getList() {
let list = []
for(let i = 0; i < 100; i++) {
list.push({
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
})
}
this.list = list
}
}
}
</script>
<style scoped lang="scss">
$page-width: 750rpx;
.page {
width: $page-width;
flex: 1;
display: flex;
}
.swiper {
width: $page-width;
flex: 1;
overflow: hidden;
display: flex;
.swiper-item {
width: $page-width;
flex: 1;
display: flex;
background-color: yellow;
.video {
flex: 1;
width: $page-width;
background-color: red;
pointer-events: none;
}
}
}
</style>
1***@qq.com
- 发布：2025-06-09 15:57
- 更新：2025-06-09 15:57
- 阅读：64
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows 10
HBuilderX类型： 正式
HBuilderX版本号： 4.66
手机系统： Android
手机系统版本号： Android 14
手机厂商： 荣耀
手机机型： 荣耀90GT
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
1.nvue页面中swiper组件中放入video标签
2.45度角向上、向下滑动
1.nvue页面中swiper组件中放入video标签
2.45度角向上、向下滑动
预期结果：
可以向上向下滑动
可以向上向下滑动
实际结果：
无法正常滑动
无法正常滑动
bug描述：
nvue页面swiper组件垂直滑动不灵敏，直上直下可以滑动，左上左下这种有角度的滑动没有反应，单手几乎无法正常滑动
0 个回复