4 回复
https://ext.dcloud.net.cn/plugin?id=3337 这个是免费的仿抖音播放器(前端控制滑动)
https://ext.dcloud.net.cn/plugin?id=5289 这个是收费的仿抖音播放器(原生控制滑动)
专业团队为您服务，我们的价格不是最低的，但是我们的插件质量、服务的可持续性肯定是没有问题的
如有需要可以进QQ群755910061沟通(QQ:57570616是商务，技术都在群里，直接跟对应的技术沟通更方便)
智密科技拥有全职前端、安卓、IOS、后端开发工程师，UI设计师，从前端到原生一条龙解决各类Uniapp疑难杂症，专业提供Uniapp原生插件，承接各类APP定制开发(开发完成后提供源码)，与我们合作意味着您为项目开发找了一个专业团队作为后盾，所有的项目都有长期的售后支持
公司已经把相机和相册插件尽可能的做到自定义，避免定制提供用户的使用成本，也有支持图片 视频编辑 压缩的插件；
腾讯IM、直播、实时音视频插件都已经商品化，提供完善的DEMO和文档，免费提供IM源码(Uniapp开发的前端源码，插件不开源)
定制各类硬件及硬件SDK，已开发大量打印机插件、RFID插件、支付类插件、播放器插件、直播美颜插件…您需要的我们都有
在uni-app中实现类似抖音视频的上下滑动功能，可以通过使用Swiper组件并结合页面滚动事件来实现。以下是一个简单的代码示例，展示了如何实现这一功能。
首先，确保你的项目已经安装了uni-app的开发环境，并在pages.json中配置好页面路径。
1. 页面布局（pages/index/index.vue）
<template>
<view class="container">
<swiper
:vertical="true"
:autoplay="false"
:interval="3000"
:duration="500"
@change="onSwiperChange"
class="swiper"
>
<swiper-item v-for="(video, index) in videos" :key="index">
<view class="video-container">
<!-- 视频播放组件，这里使用uni-app自带的video组件 -->
<video
class="video"
:src="video.src"
controls
></video>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
videos: [
{ src: 'https://example.com/video1.mp4' },
{ src: 'https://example.com/video2.mp4' },
{ src: 'https://example.com/video3.mp4' },
],
currentIndex: 0,
};
},
methods: {
onSwiperChange(event) {
this.currentIndex = event.detail.current;
},
},
};
</script>
<style>
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.swiper {
width: 100%;
height: 100%;
}
.video-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.video {
width: 90%;
height: 90%;
}
</style>
2. 说明
swiper组件的vertical属性设置为true，以实现垂直滑动。swiper-item内包含了视频播放组件（这里使用的是uni-app自带的video组件）。- 通过
v-for指令遍历视频列表，动态生成swiper-item。 - 监听
swiper的change事件，获取当前滑动的视频索引。
3. 注意事项
- 确保视频链接有效且可访问。
- 根据实际需求调整视频容器的样式，以达到最佳显示效果。
- 如果需要更复杂的功能，如视频缓存、自动播放控制等，可以进一步查阅uni-app官方文档或引入第三方视频处理库。
通过上述代码，你可以在uni-app中实现类似抖音视频的上下滑动功能。
