安装
swiper官网
npm i swiper
最简单的swiper
<template>
<swiper
:slides-per-view="3"
:space-between="50"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
...
</swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
return {
onSwiper,
onSlideChange,
};
},
};
</script>
使用自动自动切换等其他功能需要引入对应模块和css
这是一个引入自动切换功能的简单swiper。
<template>
<swiper
:slides-per-view="slideView"
:loop="true"
// 使用对应模块
:modules="modules"
:autoplay=" {delay: 800}"
direction="vertical"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide v-for="(item,index) in list" :key="index">
<div class="slide">
<div class="item">{{item.type}}</div>
<div class="item">{{item.varieties}}</div>
<div class="item">{{item.value}}</div>
</div>
</swiper-slide>
</swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide} from 'swiper/vue';
// 引入自动切换模块
import { Autoplay } from 'swiper';
import 'swiper/css';
// 引入自动切换css
import 'swiper/css/autoplay';
import {ref} from "vue";
export default {
name: "SwiperCompont",
components: {
Swiper,
SwiperSlide,
},
props:{
list: {
type: Array,
required: true,
default: () => [],
},
},
setup() {
// 展示行数
let slideView=ref(4);
const onSwiper = () => {
// console.log(swiper);
};
const onSlideChange = () => {
// console.log('slide change');
};
return {
onSwiper,
onSlideChange,
slideView,
modules: [Autoplay],
};
}
}
</script>
<style scoped>
.container {
width: 100%;
height: 100%;
}
.slide {
height: 5rem!important;
display: flex;
align-items: center;
justify-content: space-between;
}
.item {
text-align: center;
width: 33%!important;
}
</style>