English | 简体中文

c-swipe

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

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="https://unpkg.com/c-swipe/dist/swipe.css" rel="stylesheet"></head>
<script type="text/javascript" src="https://unpkg.com/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 {
    // ...
    // ...

    mounted() {
      // Avoid losing context
      this.handleResize = this.handleResize.bind(this);
      window.addEventListener('resize', this.handleResize);
    },

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

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

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

Preview

Scan the QR code below to preview

License

MIT