引入轮播图、常见的业务和项目都有大部分的第三方
第三方库:常见的功能及模块都有人写过了,你会引入实现功能
swiper官方文档:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
缺点:可能会因为版本问题无法使用,需要安装指定的版本 (npm i swiper@8.1.6)
如何获取其他vue第三方库?
- github(star多)
- vue官网:vue总结的第三方库文档
注意:使用库前查看是否支持Vue3
基础实现(swiper的轮播图)
<template>
<div class="hello">
<swiper class="mySwiper">
<!-- 一项 -->
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
</swiper>
</div>
</template>
<script>
//引入swiper
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
export default {
name:"swiperTemplate",
components:{
Swiper,
SwiperSlide,
}
}
</script>
-
:pagination="{clickable:true}"
是否允许点击触发
<template>
<div class="hello">
<swiper class="mySwiper" :modules="modules" :pagination="{clickable:true}">
<!-- 一项 -->
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
</swiper>
</div>
</template>
<script>
//引入swiper
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
//添加指示器
import {Pagination} from 'swiper/modules';
import 'swiper/css/pagination';
export default {
name:"swiperTemplate",
data(){
return{
modules:[Pagination]
}
},
components:{
Swiper,
SwiperSlide,
}
}
</script>