C-Swipe Mobile 一個簡單的輪播組件

時間 2019-12-11

標籤 swipe mobile 一個簡單組件欄目 C&C++ 简体版

原文原文鏈接

近期在作的一個Vue2項目裏須要一個簡單的卡片滑動組件，可是又由於現有的傳統輪播庫功能過於繁瑣和笨重。所以本身寫了一個針對於Vue2.x的輕型輪播組件。html

項目GitHub連接：C-Swipe Mobile 無恥的求個star
https://github.com/pspgbhu/Vue2.x-Swipe-Mobilevue

目前僅支持移動端。git

組件經過v-model綁定了組件當前分頁索引值，這很大的方便了組件的使用者。github

其實想一想目前這個組件也不能叫輪播組件，由於目前是不支持自動輪播的，只支持手動左右滑動切換分頁，不事後期考慮加入自動輪播等功能。npm

如下是組件的文檔：ide

Vue2-C-Swipe Mobile

A swipe (touch slide) component for Vue2.x in mobile device.
Only support touch event now.雙向綁定

一個簡單的移動端卡片滑動輪播組件，適用於Vue2.xcode

Install

npm install c-swipe --savecomponent

Usage

註冊組件htm

// 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 時不自動切換