C-Swipe Mobile 一个简单的轮播组件

近期在作的一个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