基于 Vue 实现的 移动端图片轮播组件.

wc-swiper

基于 Vue 的移动端的图片轮播组件.

why

以前一直在用 vue-awesome-swiper, 功能很齐全, 可是惟一的问题就是体积比较大.
我只是想要一个简单的图片轮播, 可是却要引入 100多k 大小的文件, 这样是不对的.

特色

• 支持自动播放 & 无限轮播 (loop) 效果
• 支持用户手动滑动
• 压缩后大概 ~8k

使用

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>

配置

在 wc-swiper 上面暴露了一些配置选项:

duration:    一次滑动的时间 | default: 500ms
interval:    两次滑动间隔时间 | default: 2500ms
autoplay:    是否自动播放 | default: true
therehold:    用户滑动多少距离以后自动翻页 | default: 110
curSlide:   默认显示第几个 slide | default: 0

事件

• 在 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 的 slide

问题描述

1. 如何设置轮播图的高度

经过设置 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 以及 arrow-left, arrow-right, 都只是 swiper 的配套设施, 而不该该是组成的一部分. 因此没有提供默认的 pagination 和 arrow, 而是提供了 slot, 若是你但愿

为 swiper 添加 pagination 或者 arrow, 能够经过这样的方式添加:

<wc-swiper>
    <div slot="pagination"></div>
    <div slot="arrowLeft"></div>
    <div slot="arrowRight"></div>
</wc-swiper>

能够参考这个的写法:

存在的问题

• 多指触碰的时候, 好比多根手指同时滑动的时候, 就会出现问题, 这种极端状况, 比较复杂和少见, 暂时不考虑.