本项目是Vue3整合Swiper8的尝试,看了不少网上的文章,并不都好用。官方文档是英文的,本人英语阅读能力也有限,读了很久文档才写出来这个示例,老笨比了。
在基本能用的基础上自定义了分页器,分页器左侧显示文字链接可以点击跳转,右侧显示页码。
由于Swiper的自定义分页器渲染函数拿不到组件实例中数据,所以在加载组件时把数据注入window对象中,组件销毁时移除。
不过这方法也有局限性,如果在同一页面上使用多个就GG了。
突然发现可以在<script setup>
中定义函数传进去customRender
,根据作用域链查找的规则,函数是可以访问到props
的,因此上面说的问题得到了解决。