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>
-
比较完整的swiper教程:
vue3中使用swiper7轮播图插件_swiper7实例_爱唱歌的前端的博客-CSDN博客
vue3中使用swiper完整版教程_swiper vue3-CSDN博客
如何在vue3中使用swiper插件(教程)_vue3 安装swiper-CSDN博客
滑动功能 实现参考文章:
vue实战 实现视频类webapp:(十二) 视频评论列表 - 小专栏vue项目中使用swiper(版本3.1.3)实现视频轮播_vue 视频轮播-CSDN博客
基于vue封装移动触摸滑动组件——简易的swiper_vue 滑动-CSDN博客文章来源:https://www.toymoban.com/news/detail-774192.html
vue+swiper仿抖音视频滑动_swiper + video 短视频-CSDN博客 (多个播放按钮)文章来源地址https://www.toymoban.com/news/detail-774192.html
到了这里,关于vue3 - swiper插件 实现PC端的 视频滑动功能(仿抖音短视频)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!