Coder Social home page Coder Social logo

wzj13466669587 / vue-swipe-mobile Goto Github PK

View Code? Open in Web Editor NEW

This project forked from pspgbhu/vue-swipe-mobile

0.0 1.0 0.0 463 KB

๐Ÿ˜ƒ A siwpe (touch slider) component for Vue2

License: MIT License

JavaScript 48.27% Shell 0.74% Vue 49.49% HTML 1.50%

vue-swipe-mobile's Introduction

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

vue-swipe-mobile's People

Contributors

pspgbhu avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.