c-swipe

    2.1.5 • Public • Published

    English | 简体中文

    c-swipe

    gzip 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="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

    c-swpie

    License

    MIT

    Install

    npm i c-swipe

    DownloadsWeekly Downloads

    137

    Version

    2.1.5

    License

    MIT

    Unpacked Size

    282 kB

    Total Files

    20

    Last publish

    Collaborators

    • pspgbhu