原文链接:
https://www.jianshu.com/p/51fa180e6fd6
vue3+ts+swiper6实际验证可行。
- 安装swiper6:
yarn add swiper
- 在vue3中使用swiper (原文代码)
我们默认安装的swiper6.0,这个就有一些坑要处理,如下:
1、使用某些功能需要按需引入需要相应的包,如翻页,自动播放等
2、解决了一些同学发现的左右翻页标签,小圆点出不来等问题
3、还无法实现全局引用,都为局部引用直接上全部代码;本代码为vue3 + ts + swiper6,仔细看代码可以发现,并不需要 swiper 对 ts 进行特殊处理,是因为 swiper6 同时支持了 ts 包含了相应的类型定义文件(xxx.d.ts),所以无论是不是 ts 架构,都可以正常使用
来自:https://www.jianshu.com/p/51fa180e6fd6
<template>
<div class="home">
<!-- swiper1 -->
<div class="title">基本效果-小圆点和左右切换</div>
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/sw1.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/sw2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/sw3.jpg" alt="" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面,需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面,需要自定义样式。-->
</div>
</div>
<!-- swiper2 -->
<div class="title">切换效果-effect</div>
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/sw2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/sw3.jpg" alt="" /