uniapp 开发app 仿照抖音刷视频功能 上滑动video组件没有滚动走 反而还在页面
用的swiper 每个里面是一个video元素 滑动后视频还停在页面上
2***@qq.com
- 发布：2025-09-01 09:07
- 更新：2025-09-01 10:08
- 阅读：38
2***@qq.com (作者)
<script setup>
const videoList = [
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4'
];
</script>
<template>
<view class="wrap">
<swiper vertical>
<swiper-item v-for="(item, index) in videoList" :key="index">
<video :src="item"></video>
</swiper-item>
</swiper>
</view>
</template>
<style lang="scss" scoped>
.wrap {
height: 100vh;
swiper {
height: 100vh;
video {
width: 100%;
}
}
}
</style>
2***@qq.com (作者)
代码 <script setup>
const videoList = [
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4',
'http://vjs.zencdn.net/v/oceans.mp4'
];
</script>
<template>
<view class="wrap">
<swiper vertical>
<swiper-item v-for="(item, index) in videoList" :key="index">
<video :src="item"></video>
</swiper-item>
</swiper>
</view>
</template>
<style lang="scss" scoped>
.wrap {
height: 100vh;
swiper {
height: 100vh;
video {
width: 100%;
}
}
}
</style>
2025-09-01 10:08