近期在做的一个Vue2项目里需要一个简单的卡片滑动组件，但是又因为现有的传统轮播库功能过于繁琐和笨重。因此自己写了一个针对于Vue2.x的轻型轮播组件。
项目GitHub链接：C-Swipe Mobile 无耻的求个star
https://github.com/pspgbhu/Vue2.x-Swipe-Mobile
目前仅支持移动端。
组件通过v-model绑定了组件当前分页索引值，这很大的方便了组件的使用者。
其实想想目前这个组件也不能叫轮播组件，因为目前是不支持自动轮播的，只支持手动左右滑动切换分页，不过后期考虑加入自动轮播等功能。
以下是组件的文档：
Vue2-C-Swipe Mobile
A swipe (touch slide) component for Vue2.x in mobile device.
Only support touch event now.
一个简单的移动端卡片滑动轮播组件，适用于Vue2.x
Install
npm install c-swipe --save
Usage
注册组件
// main.js
// import c-swipe files into main.js
import { Swipe, SwipeItem } from '../src/main.js';
// register components
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
在Vue中使用:
<swipe v-model="index" style="text-align: center; line-height: 80px;">
<swipe-item style="height: 100px;">item1</swipe-item>
<swipe-item style="height: 100px;">item2</swipe-item>
<swipe-item style="height: 100px;">item3</swipe-item>
</swipe>
new Vue({
// ...
// ...
// ...
data: function () {
return {
index: 0, // two way
};
},
});
Options
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
| v-model | Number | 0 | 绑定了当前显示卡片的索引，该数据为双向绑定，可通过更改 v-model 的值直接更改当前显示卡片 |
| pagination | Boolean | true | 是否需要默认样式的导航器. 如果你需要自定义导航器, v-model 的值将会给你提供一定的帮助 |
| time | Number | 0 | 单位 ms，自动切换卡片的时间间隔，值为 0 时不自动切换 |
Preview
用手机扫描下方二维码进行预览
License
MIT
近期不仅修复了若干的bug，还上传至了npm，欢迎大家使用。
项目GitHub链接：C-Swipe Mobile 无耻的求个star
https://github.com/pspgbhu/Vue2.x-Swipe-Mobile