<template>
<view>
<swiper class="swiper" vertical :style="{height:windowsHeight+'px'}" @change="changeItem">
<swiper-item class="item" v-for="(videoItem,index) in videoList">
<video :style="{height:windowsHeight+'px'}" :src="videoItem.src" class="video" :id="'video'+index">
</video>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
videoList://一个video的对象数组，包含src
}
}
}
2***@qq.com
- 发布：2020-07-20 15:17
- 更新：2021-05-25 21:51
- 阅读：1665
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： w10家庭版
HBuilderX类型： 正式
HBuilderX版本号： 2.7.14
手机系统： Android
手机系统版本号： Android 10
手机厂商： 小米
手机机型： MI 8 SE
页面类型： nvue
打包方式： 离线
项目创建方式： HBuilderX
示例代码：
操作步骤：
如上
如上
预期结果：
通过swiper的垂直滑动，每次只显示一个video
通过swiper的垂直滑动，每次只显示一个video
实际结果：
进入该页面，第二个视频会异常显现出来遮盖住第一个视频
进入该页面，第二个视频会异常显现出来遮盖住第一个视频
bug描述：
用的是nvue页面，swpier中swiper-item用v-for循环一个video列表，swiper高度设置为（windowsHeight - statusBarHeight），video高度与swiper相同，然后安卓端会出现这种第二个视频遮盖住第一个第一个视频的情况，ios端则不会。（如图1中播放键是video-2的播放键，但是正常来说，此时不应该显示video-2的！）
我自己尝试过只当item-index！=currentIndex时高度为0，安卓端问题可以解决，但是ios端会有新的问题。
希望官方能把安卓端那边的问题给解决了。
用 hello uni-app 示例验证下是否正常 https://github.com/dcloudio/hello-uniapp/tree/master/pages/template/swiper-vertical
2***@qq.com (作者)
示例正常，我在多次修改本地代码对比验证后发现，videoList如果直接放在data中初始化便会出现遮盖现象，于是我仿照示例将videoList在onReady（）{}中初始化边能正常播放，虽然不知道为什么不能在data中初始化，还是感谢解决燃眉之急。不过如果这是bug的话，希望官方能够修复以获得更好的体验。谢谢！
2020-07-21 08:58
2***@qq.com (作者)
还有一个问题，为什么安卓设备上的swiper滑动那么困难，必须直上直下的滑动才能监听到，ios设备滑动却很轻松。
2020-07-21 14:56
DCloud_uniAD_HDX
回复 2***@qq.com: 以后会优化
2020-07-21 18:54