vue3.0中使用swiper
由于普通的ui组件库中的轮播图无法满足需求,因此使用了这个库。效果图如下:安装swiper npm i swiper现在下载默认6x版本的,6x版中封装了组件,可以在vue中直接使用。用法跟以前不一样!! ,部分api也不对。<template><div><a-row type="flex" justify="center"><a-col :xs="0"
·
由于普通的ui组件库中的轮播图无法满足需求,因此使用了这个库。
效果图如下:
- 安装swiper
npm i swiper
现在下载默认6x版本的,6x版中封装了组件,可以在vue中直接使用。用法跟以前不一样!! ,部分api也不对。
<template>
<div>
<a-row type="flex" justify="center">
<a-col :xs="0" :sm="0" :md="0" :lg="20" :xl="20" class="swiper_box">
<swiper
:autoplay="swiper_options.autoplay"
:loop="swiper_options.loop"
:speed="swiper_options.speed"
:pagination="swiper_options.pagination"
:navigation="swiper_options.navigation"
:spaceBetween="swiper_options.spaceBetween"
:coverflowEffect="swiper_options.coverflowEffect"
:centeredSlides="swiper_options.centeredSlides"
:slidesPerView="swiper_options.slidesPerView"
class="swiper"
effect="coverflow"
>
<swiper-slide
><img class="my_swiper_imgs" src="../../../assets/1.jpg" alt=""
/></swiper-slide>
<swiper-slide
><img class="my_swiper_imgs" src="../../../assets/2.jpg" alt=""
/></swiper-slide>
<swiper-slide
><img class="my_swiper_imgs" src="../../../assets/3.jpg" alt=""
/></swiper-slide>
</swiper>
</a-col>
</a-row>
</div>
</template>
<script>
import "./MySwiper.less";
import { reactive } from "vue";
// 使用swiper的compositon API
import SwiperCore, { Autoplay, Pagination, EffectCoverflow,Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.less";
import "swiper/components/navigation/navigation.less";
SwiperCore.use([Autoplay, Pagination, EffectCoverflow,Navigation]);
export default {
name: "MySwiper",
components: {
Swiper,
SwiperSlide,
},
setup() {
// swiper相关配置属性放在swiper_options这个变量里
let swiper_options = reactive({
autoplay: {
disableOnInteraction: false, // 鼠标滑动后继续自动播放
delay: 4000, //4秒切换一次
},
speed: 500, //切换过渡速度
loop: true,
slidesPerView: "auto", //解决最后一张切换到第一张中间的空白
centeredSlides: true, //设置slide居中
spaceBetween: 20,
coverflowEffect: {
// rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
stretch: 50, //每个slide之间的拉伸值(距离),越大slide靠得越紧。 默认0。
depth: 100, //slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
modifier: 1, //depth和rotate和stretch的倍率,相当于 depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
// slideShadows: false, //开启slide阴影。默认 true。
},
navigation: {
nextElRef: ".swiper-button-next",
prevElRef: ".swiper-button-prev",
},
pagination: {
clickable: true,
},
});
// 将swiper_options返回给模板中的swiper组件使用
return { swiper_options };
},
};
</script>
上述代码只说一样跟以前不一致的地方:
- 引入
import SwiperCore, { Autoplay, Pagination, EffectCoverflow,Navigation } from "swiper";import { Swiper, SwiperSlide } from "swiper/vue";
需要引入组件和一些配置项,这里我的轮播图需要自动播放(Autoplay),小圆点(Pagination),切换效果(EffectCoverflow),左右按钮(Navigation )。 - 导入样式
import "swiper/swiper.min.css"; // 整个轮播图的样式 import "swiper/components/pagination/pagination.less"; // 分页器的样式 import "swiper/components/navigation/navigation.less"; // 左右按钮的样式
- 注册配置项
SwiperCore.use([Autoplay, Pagination, EffectCoverflow,Navigation]);
- 在setup中写具体配置的时候需要注意有几个不一样的地方
跟以前不一样。navigation: { nextElRef: ".swiper-button-next", prevElRef: ".swiper-button-prev", },
- MySwiper.less
.swiper { max-height: 600px; } body { overflow-x: hidden; } .swiper_box { .swiper-slide { width: 600px; height: 400px; // border: 1px solid rgba(255, 255, 255,0); box-shadow: 0 2px 6px rgb(133, 133, 133); } .swiper-slide>img { width: 100%; height: 100%; } .swiper-container { margin-top: 20px; width: 100%; height: 520px; // margin-bottom: 53px; overflow: visible !important; margin-bottom: -30px; } .swiper-container .swiper-wrapper .swiper-slide { width: 1200px; border-radius: 2px; height: 480px; } .swiper-container .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; border-radius: 2px; } .swiper-slide.swiper-slide-active:before { opacity: 0; } .swiper-container .swiper-pagination { bottom:60px; } .swiper-pagination .swiper-pagination-bullet { width: 16px; height: 16px; background: rgba(0,0,0,0.6); } .swiper-pagination .swiper-pagination-bullet-active { background: #fff; } .swiper-button-prev:after, .swiper-button-next:after { color: rgb(171, 149, 230); } }
总结
在vue3.0中使用swiper,整体下来的体验不太好,发现一个至今未解决的bug,项目打包后这个轮播图的小圆点和左右切换的按钮没有了。如果不是需要使用很多轮播图的话,更推荐自己写一个。
更多推荐
已为社区贡献4条内容
所有评论(0)