24 回复
简单实现，触摸滑动前记录touchstart位置（Y轴位置，以下皆是），滑动后拿touchend位置与touchstart记录的位置比较，增加换前一个视频地址，减少换后一个视频地址
别争了，用这个终极解决方案。这个太灵敏了。灵敏度可以自己修改上面的条件自由设置。
https://ext.dcloud.net.cn/plugin?id=860
实现uni-app仿抖音首页视频滑动功能，可以利用uni-app提供的swiper组件来实现水平滑动效果。以下是一个简单的代码示例，展示了如何使用swiper组件来实现这一功能。
首先，确保你的uni-app项目已经创建并配置好。
- 在
pages/index/index.vue文件中编写以下代码：
<template>
<view class="container">
<swiper
class="swiper-container"
indicator-dots="true"
autoplay="false"
interval="3000"
duration="500"
circular="true"
current="{{currentIndex}}"
bindchange="swiperChange"
>
<block v-for="(video, index) in videoList" :key="index">
<swiper-item>
<view class="swiper-item">
<image class="video-cover" :src="video.cover" mode="aspectFill"></image>
<!-- 可以在这里添加播放按钮等其他元素 -->
</view>
</swiper-item>
</block>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
currentIndex: 0,
videoList: [
{ cover: 'https://example.com/video1.jpg' },
{ cover: 'https://example.com/video2.jpg' },
{ cover: 'https://example.com/video3.jpg' },
// 添加更多视频封面链接
],
};
},
methods: {
swiperChange(e) {
this.currentIndex = e.detail.current;
// 可以在这里添加视频播放逻辑
},
},
};
</script>
<style>
.container {
width: 100%;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-item {
display: flex;
justify-content: center;
align-items: center;
}
.video-cover {
width: 100%;
height: 100%;
}
</style>
- 解释代码：
swiper组件用于实现滑动效果，indicator-dots属性用于显示指示点，autoplay、interval和duration属性用于控制自动播放行为，circular属性用于实现循环滑动。v-for指令用于循环渲染视频封面，每个封面作为一个swiper-item。swiperChange方法用于处理滑动事件，可以在这里添加视频播放逻辑（例如，根据当前索引播放对应视频）。- 样式部分定义了容器、滑动容器和视频封面的样式，确保视频封面能够正确显示并占满整个滑动项。
这个示例展示了如何使用swiper组件来实现基本的视频封面滑动效果。你可以根据实际需求进一步扩展功能，例如添加视频播放按钮、处理视频播放逻辑等。
