上图是有赞的一个页面,因最近公司项目中也有类似需求,同时为分享自己实现此效果的代码,故写这篇博客记录一下。
首先使用到两个插件
1、swiper 版本 8.2.6
2、animate.css 版本 4.11
下面直接贴组件的代码
<template>
<div class="avatar-box">
<swiper
:modules="modules"
:autoplay="isAutoplay"
:slides-per-view="4"
:loop="isLoop"
@slideChange="onSlideChange"
>
// swiper-slide 加上类名swiper-no-swiping 禁止滑动
// 看官方文档是要将noSwiping配置项设置为true,然后在swiper-slide上面添加swiper-no-swiping类名才行实现。
// 但貌似直接在swiper-slide添加类名即可实现。。。。。。
<swiper-slide v-for="(item,index) in avatarList" :key="item" :class="[isSwiping?'':'swiper-no-swiping']" class="slide">
<img :src="item" class="avatar-img"
:class="['animate__animated',currentIndex===index || currentIndex-1===index ?'animate__zoomOut':'',
currentIndex+3===index?'animate__zoomIn':'']"/>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
// import Swiper core and required modules
import { Autoplay } from 'swiper'
// Import Swiper styles
import 'swiper/scss'
export default {
props: {
isAutoplay: {
// 是否自动切换
type: Boolean,
default: true
},
isLoop: {
// 是否无限循环
type: Boolean,
default: true
},
isSwiping: {
// 是否可以滑动,
type: Boolean,
default: false
}
},
components: {
Swiper,
SwiperSlide
},
setup () {
const state = reactive({
currentIndex: '',
avatarList: [
require('../assets/images/avatar/avatar.png'),
require('../assets/images/avatar/avatar.png'),
require('../assets/images/avatar/avatar.png'),
require('../assets/images/avatar/avatar.png'),
require('../assets/images/avatar/avatar.png'),
require('../assets/images/avatar/avatar.png'),
require('../assets/images/avatar/avatar.png')
]
})
const onSlideChange = (swiper) => {
// realIndex当前活动块的索引
const { realIndex } = swiper
state.currentIndex = realIndex
}
return {
...toRefs(state),
modules: [Autoplay],
onSlideChange
}
}
}
</script>
<style lang="scss" scoped>
.avatar-box {
170px;
.slide {
.avatar-img {
40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 1px solid #ccc;
}
}
}
</style>
最终实现的效果如下,差不多吧哈哈哈。