看来想要逃过真香定律确实不容易,今天在我寻找一款能够实现移动端触摸切换轮播图的组件时还是用上了 swiper,对于这个组件,其实之前我是有过了解的,只是当初的自己觉得为了页面上的一个轮播图效果而要额外引用一个超过 100kb 的文件实属不是一个优雅的方式,那个时候自己在做项目的时候一直都倾向于使用原生 js 的方式来实现各种功能,即便是应用十分广泛的 jquery 也被当时的自己嗤之以鼻。
不够后来我还是沦陷了,今天在实现商城项目轮播图的时候用上 swiper 的时候仿佛又找到了当初使用 jquery 时候的感觉,忍不住要说一声:真香!
swiper 使用起来很简单,有一个中文的说明官网,上面有详细的说明,只需要简单的引用一个 js 和 css 文件,然后把自己的图片改造成参考的结构,就顺利成功了,对于各种组件的介绍和使用方法只要跟着使用说明复制粘贴就好了,几乎没什么难度,这不由得又让我觉得前端行业也不是很复杂嘛。
使用这个组件我主要是为了实现能够在手机上使用触摸的方式左右切换图片,轮播图的效果我此前一直坚守着一个简洁的代码来实现,不过那个代码只有基本的淡入淡出不支持触摸,所以才要替换掉它。
我觉得后面我可能会像使用 jquery 一样高频率的使用这个组件了,目前最新的 5.2 版本 js 文件大小约 120kb,跟一张图片的尺寸差不多,想来也应该不会对网页的速度造成明显的影响。