swiper纵向切换效果(每次滚动一小个方块)
因为上一篇文档在介绍vue项目中使用swiper的方法,所以这个例子我直接在vue项目里写的。当然html页面里和这个差不多。
话不多说,上代码。slide里面的样式和内容可以根据自己的需求去写,我主要是为了展示功能,就写了一个简单的效果。
<!-- 组件的模板 -->
<template>
<div class="car">
<!-- 第二个swiper -->
<div class="swiper2">
<swiper :options="swiperOption2">
<swiper-slide>
<div>第一个</div>
</swiper-slide>
<swiper-slide>
<div>第二个</div>
</swiper-slide>
<swiper-slide>
<div>第三个</div>
</swiper-slide>
<swiper-slide>
<div>第四个</div>
</swiper-slide>
<swiper-slide>
<div>第五个</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<!-- 组件的模型 -->
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
// 组件的名称
name: "car",
data() {
return {
swiperOption2:{
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: true,
direction: 'vertical',
slidesPerView: 'auto',
}
}
},
components: {
swiper,
swiperSlide,
},
}
</script>
<!-- 组件的样式 -->
<style scoped>
.swiper2{
width: 300px;
height: 600px;
margin: 20px auto;
}
.swiper2 .swiper-container{
height: 100%;
}
.swiper2 .swiper-slide{
height: 200px;
}
.swiper2 .swiper-slide div{
box-sizing: border-box;
height: 100%;
line-height: 200px;
background-color: lightblue;
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
</style>