https://github.com/pspgbhu/vue-swipe-mobile
đ A siwpe (touch slider) component for Vue2
https://github.com/pspgbhu/vue-swipe-mobile
c-swipe c-swiper slide slider swipe swiper vue vue-swipe vue-swiper
Last synced: 2 months ago
JSON representation
đ A siwpe (touch slider) component for Vue2
- Host: GitHub
- URL: https://github.com/pspgbhu/vue-swipe-mobile
- Owner: pspgbhu
- License: mit
- Created: 2017-01-25T05:34:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T17:16:52.000Z (over 2 years ago)
- Last Synced: 2025-04-10T08:46:43.928Z (3 months ago)
- Topics: c-swipe, c-swiper, slide, slider, swipe, swiper, vue, vue-swipe, vue-swiper
- Language: Vue
- Homepage:
- Size: 1.42 MB
- Stars: 97
- Watchers: 5
- Forks: 25
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
English | [įŽäŊä¸æ](./README_CN.md)
# c-swipe
[](https://unpkg.com/c-swipe/dist/swipe.js)
[](https://www.npmjs.org/package/c-swipe)
[](https://npmjs.org/package/c-swipe)
[](https://github.com/pspgbhu/Vue2-C-Swipe-Mobile/issues)
[](https://github.com/pspgbhu/vue-swipe-mobile)
[](https://nodei.co/npm/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:
```js
// 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.
```html
item1
item2
item3
```
```js
new Vue({
data: function () {
return {
index: 0, // two way
};
},
});
```
*Or, you want import it by html tag*
```html
```
```js
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:
```jsx
item1
item2
item3
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();
},
},
// ...
// ...
}
```
## Preview
Scan the QR code below to preview
## License
MIT