分享一个 vue 轻量级的轮播组件

1,654 阅读1分钟
原文链接: github.com

npm package NPM downloads GitHub issues Travis

NPM

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

c-swipe

中文文档

Install

npm install c-swipe --save

Usage

register components:

// main.js

// import c-swipe files into main.js
import 'c-swipe/dist/swipe.css';
import { Swipe, SwipeItem } from 'c-swipe';

// global register components
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);

Use in .vue files.

<swipe
  v-model="index"
  style="text-align: center; line-height: 80px; height: 100px; background: #42b983;"
>
  <swipe-item style="height: 100px; line-height: 100px">item1</swipe-item>
  <swipe-item style="height: 100px; line-height: 100px">item2</swipe-item>
  <swipe-item style="height: 100px; line-height: 100px">item3</swipe-item>
</swipe>
new Vue({
  data: function () {
    return {
      index: 0, // two way
    };
  },
});

Or, you want import it by html tag

<link href="../node-modules/c-swipe/dist/swipe.css" rel="stylesheet"></head>
<script type="text/javascript" src="../node-modules/c-swipe/dist/swipe.js"></script>
var vueSwipe = swipe.Swipe;
var vueSwipeItem = swipe.SwipeItem;

new Vue({
  el: 'body',
  // register components
  components: {
    'swipe': vueSwipe,
    'swipe-item': vueSwipeItem
  }
  // ...
  // ...
});

Options

Option Type Defalut Description
v-model Number 0 The value binding index of swipe-item
pagination Boolean true If need default pagination.
loop Boolean true loop move
autoplayTime Number 0 ms. Interval time of change card. The card will not auto change when this value is equal to 0
speed Number 300 ms, the spend time of change card.
minMoveDistance String '20%' Such as '20%', '80px'. The minimum distance that trigger to change card

Methods

  • swipe.reset()

The c-swipe internally recalculates the width of the Swipe and calculates the scroll distance based on the new width. This solves the problem that the c-swipe scroll distance is not correct after the container is resized.

Example:

<swipe ref="swipe">
  <swipe-item>item1</swipe-item>
  <swipe-item>item2</swipe-item>
  <swipe-item>item3</swipe-item>
</swipe>

<script>
  export default {
    // ...
    // ...

    handleResize() {
      this.$refs.swipe.reset();
    }

    mounted() {
      // Avoid losing context
      this.handleResize = this.handleResize.bind(this);

      window.addEventListener('resize', this.handleResize);
    },

    destroyed() {
      window.removeEventListener('resize', this.handleResize);
    }

    // ...
    // ...
  }
</script>

Preview

Scan the QR code below to preview

c-swpie

License

MIT