C-Swipe Mobile 一个适用于Vue2.x的移动端轮播组件

2022-11-08 21:25:16

近期在做的一个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，欢迎大家使用。