基于 Vue 的移动端的图片轮播组件.
之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的.
- 支持自动播放 & 无限轮播 (loop) 效果
- 支持用户手动滑动
- 压缩后大概 ~8k
- 支持鼠标事件
- 支持上一页, 下一页, 以及滚动到指定页面
- 支持自定义 Pagination 以及左右箭头
npm i wc-swiper --save
// 在入口文件中引入(暂时不支持单组件引入的方式):
import wcSwiper from 'wc-swiper'
import 'wc-swiper/style.css'
Vue.use(wcSwiper);// 在需要使用的 view 里面引入:
<wc-swiper>
<wc-slide>
// 这里放你需要轮播的内容, 比如一张图片
</wc-slide>
</wc-swiper>
// 循环列表
<wc-swiper>
<wc-slide v-for="(slide, key) in slides" :key="key">
</wc-slide>
</wc-swiper>
// 异步获取 slides 的时候, 需要在 wc-swiper 上面添加 v-if 判断
<wc-swiper v-if="slides.length">
<wc-slide v-for="(slide, key) in slides" :key="key">
</wc-slide>
</wc-swiper>
// 带配置选项
<wc-swiper :duration="900" :interval="2000" @transitionend="fn">
<wc-slide>
// 这里放你需要轮播的内容, 比如一张图片
</wc-slide>
</wc-swiper>所有的配置参数, 都必须使用动态props 而不能使用字面量Props:
<wc-swiper :duration="1500"> // 正确
<wc-swiper duration="1500"> // 错误在 wc-swiper 上面暴露了一些配置选项:
duration: 一次滑动的时间 | default: 500ms
interval: 两次滑动间隔时间 | default: 2500ms
autoplay: 是否自动播放 | default: true
therehold: 用户滑动多少距离之后自动翻页 | default: 110
defaultSlide: 默认显示索引为多少的 slide | default: 0,
pagination: 是否显示 pagination | default: true- 在 wc-swiper 上可以监听一些事件:
transitionend 事件
每一次滑动结束(不论用户手动滑动, 还是自动滑动) 都会触发 transitionend 事件.
transtionend 携带唯一一个参数:currentSlide, 用来表明, 当前 slide 是第几个 slide.
并且要注意: slide 从 0 开始计数.- 在 wc-slide 上面可以监听 click 事件.
有些时候, 你可能想要实现这样一种操作: 点击一个按钮, 让 swiper 跳转到指定的 slide, 或者点击按钮, 让 swiper 跳转到上一个或者下一个. 对此, 你可以这样操作:
1. 在 <wc-swiper> 标签上添加 ref 属性, 例如: <wc-swiper ref="swiper"></wc-swiper>
2. 通过 this.$refs.swiper 来引用预先提供的 3 个方法:
slideTo (index) 跳转至指定索引 (index 从 0 开始)
next () 跳转到下一个
previous () 跳转到上一个
例如:
this.$refs.swiper.slideTo(3) // 跳转到索引为 3 的 slide1. 如何设置轮播图的高度
通过设置 wc-swiper 的高度即可. 比如:
<wc-swiper class="swiper"></wc-swiper>.swiper {
height: 200px;
}2. 如何渲染异步数据
一般情况下, 轮播的数据可能通过接口请求得来, 此时, 需要在 wc-swiper 上面加上 v-if 判断, 从而延迟 wc-swiper 的渲染时机:
<wc-swiper v-if="slides.length">
<wc-slide v-for="(slide, key) in slides" :key="key">
</wc-slide>
</wc-swiper>3. 点击 slide 的时候如果需要跳转新的页面该怎么办
可以为 wc-slide 的内容包裹一层 a 标签
<wc-swiper>
<wc-slide>
<a>
//content
</a>
</wc-slide>
</wc-swiper>或者可以在 wc-slide 上面监听 click 事件:
<wc-swiper>
<wc-slide @click="fn"></wc-slide>
</wc-swiper>4. 怎么添加 pagination 或者左右箭头?
首先, 对于 pagination 这种常用的功能, 内置了一个默认的 pagination; 如果样式不满意, 可以通过重置 样式来定制; 其次, 在我看来, pagination 以及左右箭头, 都只是 swiper 的配套设施而不是组成部分. 所以 如果你想要使用自己定义的 pagination, 可以通过 slot 覆盖掉原来的 pagination 或者左右箭头.
<wc-swiper>
<div slot="pagination"></div>
<div slot="arrowLeft"></div>
<div slot="arrowRight"></div>
</wc-swiper>5. 如果想要在 swiper 里面放一些不随着 slide 滚动的内容怎么做
提供了一个 slot
<wc-swiper>
<wc-slide ...>
<span slot="g">固定元素</span>
</wc-swiper>- 多指触碰的时候, 比如多根手指同时滑动的时候, 就会出现问题, 这种极端情况, 比较复杂和少见, 暂时不考虑.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent