swiper安装
安装的版本是6版本
npm install swiper@6.8.4 --save
FilmSwiper组件
组件js、cs导入
有个插槽,是为了放filmswiperitem组件的
<template>
<div class="swiper-container kerwin">
<div class="swiper-wrapper">
<slot></slot>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 如果需要滚动条-->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</template>
<script>
import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'
export default {
props: {
loop: {
type: Boolean,
default: true
}
},
mounted () {
console.log(this.loop)
// 初始化swiper
new Swiper('.kerwin', {
// direction: 'vertical', // 垂直切换选项
loop: this.loop, // 循环模式选项
// 自动切换
autoplay: {
delay: 2500,
disableOnInteraction: false
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination'
}
// 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev'
// }
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar'
// }
})
}
}
</script>
<style scoped>
.swiper-container {
width: 600px;
height: 200px;
}
img-class {
width: 600px;
height: 200px;
}
</style>
FileSwiperItem组件
有插槽
<template>
<div class="swiper-slide">
<slot></slot>
</div>
</template>
使用
先import组件
在注册组件
模拟数据
遍历数据
<template>
<div>
<div style="height:200px;background:yellow">
<filmSwiper :key="dataList.length" :loop="true">
<file-swiper-item v-for="data in dataList" :key="data.id">
<img :src="data.imgUrl" class="img-class" />
</file-swiper-item>
</filmSwiper>
</div>
</div>
</template>
<script>
import filmSwiper from '@/components/films/FilmSwiper'
import fileSwiperItem from '@/components/films/FileSwiperItem'
export default {
data () {
return {
dataList: []
}
},
mounted () {
setTimeout(() => {
this.dataList = [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F86d6277f9e2f070859318101e024b899a901f2ff.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=aec5cfa4ab00f14ebc352c6c0cf74968',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F06%2F20200706150844_KcVlG.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=91b49462bd22370160fd89c05306e566',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F7a899e510fb30f24029b4702c195d143ad4b03a9.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=f03f024afb1ef595e5aa69217c4b5efc'
]
}, 2000)
},
components: {
filmSwiper,
fileSwiperItem
}
}
</script>
<style scoped>
#three{
height: 270px;
border: 5px solid;
}
.img-class {
width: 600px;
height: 300px;
}
</style>>