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
