好的组件，无须太复杂 – KISSY Slide 组件简介

2021-07-16 02:17:08

V1.1 New Featurs

Slide是一个幻灯切换组件，和KISSY Core中的switchable组件不同，它更注重功能和对外暴露的Api以及事件的设计，帮你完成对它的二次封装。相比于switchable，Slide组件增加这些功能

1，暴露最常用的事件

2，增加控件尺寸的自适应，特别是在窗口可变的场景中的适配 3，分层动画 4，Mobile中的触屏支持

示例代码

Slide内嵌在Gallery中，当前版本为1.1，初始化方法：

Slide依赖典型的HTML结构

其中：

更多配置项示例：

跑马灯原理

跑马灯是可以连续相同方向滚动的幻灯，帧首尾相连接。有两种实现方式，一种是滚动时将首（尾）的节点拷贝至尾（首），另一种是初始化时处理首尾的节点，滚动时只改变位置，出于性能的考虑，Slide采用第二种方式。

即同时复制多个帧至首位，数量根据Slide组件的colspan参数指定，比如colspan为2，则滑块的跨度为2，复制两分，如图：

切换幻灯的动作实际上是滑块移动的操作，滑块定位在初始位置由参数defaultTab指定，默认为0，如果colspan指定了跨度为2，则滑块初始位置为：

因为节点被复制，而在IE和W3C中复制节点有差异，IE会复制事件，W3C默认不会复制节点事件，因此，帧里的元素如果绑定了事件，可能在赋值过程中被丢掉。

长宽自适应的Slide

页面运行时的尺寸可能会有变化，当宽屏变窄屏时，Slide组件也需要自适应，尤其是在Mobile中横评竖屏切换时，需要设置适应宽度的属性，比如假设Slide的宽度始终跟随浏览器的宽度走，这样传参：

跨帧动画

跨帧动画是Slide全副动画的变种，支持切换其中一部分。只需传入colspan参数即可

多帧动画 LayerSlide

分层动画是最近很火的设计小彩蛋，简单的分层动画可以营造Flash一般的效果，比如LayerSlide。只是这种基于Jquery的代码体积既笨重（Kissy Slide体积比LayerSlide小一半）又场景单一。KISSY Slide支持分层动画，Demo。

分层动画只需在初始化时打开开关：

在HTML中，需要指定每一帧的 `alt=”sublayer”`，并给出每个sublayer的动画模式：

其中rel为当前层动画的配置参数，采用key:value的形式定义，多属性之间用逗号分隔，注意结束位置不要写逗号。sublayer的配置参数请参照这里。

ps:目前Gallery中已有了更强大的专门作分层动画的组件Layer-anim，支持动画反向播放。

触屏支持

组件会检测硬件设备，在移动设备中自动件支持触屏事件，用手指左后滑动切换幻灯,Demo。

同时，Slide组件还提供touchmove参数，在帧元素很多的时候，帧跟随手指滑动会很耗内存，这时需要配置touchmove:true，来启动手指滑动结束后执行帧的左右滑动。

KISSY Slide 实现了FlipSnap的几乎所有功能。

Slide的二次封装

Slide 提供丰富的参数适合被二次封装，这里有两个例子：

因为 Slide 提供足够的 API，比如几个常见的方法

常用的属性

Slide V 1.2 版本计划

目前Slide为1.1版本，V1.2版本将增加这些特性支持

文档和Demo

码农公寓