当前位置：首页 > news >正文

vue3 - swiper插件实现PC端的视频滑动功能（仿抖音短视频）

news 来源：原创 2024/5/17 12:26:36

swiper官网

swiper属性/组件查询

vue中使用swiper

步骤：

① npm install swiper 安装

② 基础模板：

<div><swiper class="swiper-box" :direction="'vertical'":grabCursor="true" :mousewheel="true" :mousewheelControl="true" :resistanceRatio = "0":observeParents = "true":options="swiperOption"><!-- 幻灯片内容 --><swiper-slide class="slide-box" v-for="(item, index) in dataList" :key="index"><div><video class="video-box" ref="videos" controls autoplay :videoList="item" :src="item.url" :index="index" ></video></div><div class="info-bar-" >...</div><div class="video-box-right">...</div></swiper-slide></swiper>
</div>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import "swiper/swiper-bundle.css";
export default {name: 'VideoList',components: {Swiper,SwiperSlide,},data() {return {...}}
}
</script>

如图：

属性：

direction = " 'vertical' " ，滑动方向，vertical 垂直方向。（注：一定要两对引号包裹着，否则不生效，还要给swiper设置实高）

modules = "modules"

grabCursor="true"，鼠标手掌形状，拖动时变抓手形状

slidesPerView = "1"，slider容器能够同时显示的slides数量(carousel模式)

mousewheel = "true"，鼠标滚轮控制Swiper切换

setWrapperSize="true"，swiper使用flexbox布局，这个会在wrapper上添加等于slides相加的宽和高

observeParents = "true"，当Swiper 的祖先元素发生变化时，例如show/hide、第一级子元素增加/删除等，则更新Swiper 并触发 observerUpdate 事件

resistanceRatio: 0，抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。

navigation="true"，导航栏

autoplay = "true"，自动播放

loop = "true"，无限循环播放

space-between，每张轮播图之间的距离，该属性不可以和margin属性同时使用。

pagination = "{ clickable: true }"，分页器（是否点击圆点切换轮播）

注：在标签上格式为 :属性=”值“，如 :direction="vertical"

在 js 中格式为属性:值，如 direction:verical

完整代码：

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import "swiper/swiper-bundle.css";
export default {name: 'VideoList',components: {Swiper,SwiperSlide,},data() {return {page: 1,swiperOption: {on: {// tap方法 是swiper组件提供的点击方法tap: () => {this.playAction(this.page - 1)},// 上滑（屏幕向上滑时，跳到下一个视频）slideNextTransitionStart: () => {this.page += 1;this.nextVideo(this.page - 1)console.log(this.page);},// 下滑（屏幕向下滑时）slidePrevTransitionEnd: ()=> {if(this.page > 1){this.page -= 1;this.prevVideo(this.page - 1)console.log(this.page);}},}}}},methods: {playAction(index) {     // 入参 是 当前屏幕显示的是第几个视频this.$refs.videos[index].playOrStop();},// 向下nextVideo(index){this.$refs.videos[index-1].stop()this.$refs.videos[index].play()},// 向上prevVideo(index){this.$refs.videos[index+1].stop()this.$refs.videos[index].play()},},setup(){}
}
</script><script setup>
import { ref } from 'vue';const dataList = [{id: "1",url:"http://s32p8v831.hd-bkt.clouddn.com/2023-09-23%2012.00.00_%23%E5%B4%A9%E5%9D%8F%E6%98%9F%E7%A9%B9%E9%93%81%E9%81%93__%23%E8%82%AF%E5%BE%B7%E5%9F%BA%E6%98%9F%E7%A9%B9%E9%93%81%E9%81%93__%23%E5%B8%AE%E5%B8%AE%E6%88%91%E8%82%AF%E5%BE%B7%E5%9F%BA%E7%88%B7%E7%88%B7___%E7%82%B8%E9%B8%A1_%E6%89%A7%E8%A1%8C__KI%E4%B8%8A%E6%A0%A1%E7%AB%9F%E7%84%B6%E4%B9%9F%E6%9C%89%E9%9A%90%E8%97%8F%E7%9A%84%E5%8A%9B%E9%87%8F___KI%E4%B8%8A%E6%A0%A1%E6%88%90%E5%8A%9F%E5%8F%91%E5%8A%A8%E8%82%AF%E5%BE%B7%E5%9F%BA%E7%BB%88%E7%BB%93%E6%8A%80_%E7%8E%B0%E5%9C%BA%E8%B6%85%E9%9C%87%E6%92%BC%E8%A7%86%E9%A2%91%E4%BC%A0%E5%9B%9E_%E4%B8%80%E8%B5%B7%E6%9D%A5%E7%9C%8B%E7%9C%8B%E5%B8%95__video-transcode..mp4",},{id: "2",url:"http://s32p8v831.hd-bkt.clouddn.com/2023-09-21%2021.00.08_%23%E8%82%AF%E5%BE%B7%E5%9F%BA%E7%87%83%E6%83%85%E4%BA%9A%E8%BF%90%E5%AD%A3_%E5%92%8C%E5%8F%AF%E7%88%B1%E7%9A%84%E5%90%89%E7%A5%A5%E7%89%A9_%E5%B0%8F%E6%9C%8B%E5%8F%8B%E4%BB%AC%E4%B8%80%E8%B5%B7%E8%B7%B3%E4%BA%9A%E8%BF%90%E5%8A%A0%E6%B2%B9%E6%93%8D_%E4%B8%BA%E4%BA%9A%E8%BF%90%E5%8A%A0%E6%B2%B9%E5%8A%A9%E5%A8%81__video-transcode..mp4",},
]</script>
<template><div class="swiper-wrapper"><swiper class="swiper-box" :direction="'vertical'":grabCursor="true" :mousewheel="true" :mousewheelControl="true" :resistanceRatio = "0":observeParents = "true":options="swiperOption"><!-- 幻灯片内容 --><swiper-slide class="slide-box" v-for="(item, index) in dataList" :key="index"><div><video class="video-box" controls ref="videos" :videoList="item" :src="item.url" :index="index" autoplay></video></div><div class="infobar_warp" ><InfoBar :info-data="item" /></div><div class="video-box-right"><LikeComponent :like-data="item"></LikeComponent></div></swiper-slide></swiper></div>
</template><style scoped lang="scss">
.swiper-wrapper {/* width: 100vw ;  */height: calc(100vh - 100px);.swiper-box {width: 100%;.slide-box {.video-box {width: 100%;height: calc(100vh - 100px);}.video-box-right {position: absolute;right: 0;bottom: 30vh;top: 30vh;/* z-index: 80; */}.infobar_warp {position: absolute;bottom: 55px;left: 0;}}}
}
</style>