A lightweight slide component for vue
Switch branches/tags
Nothing to show
Clone or download
Latest commit 9e3fa6b Feb 1, 2018
Permalink
Failed to load latest commit information.
.gitignore add: gitignore Dec 8, 2016
App.vue new version Dec 8, 2016
README.md Fix typo in Readme Feb 1, 2018
cov-touch.es5.js fix: event Dec 8, 2016
cov-touch.js fix: event Dec 8, 2016
package.json fix: issue#11 Feb 16, 2017
vue-slide.vue Call init() when mounted Dec 23, 2016

README.md

vue-slide

Demo

The demo page is HERE.

Installation

npm

$ npm install vue-slide

Usage

Basic

<rd-swipe :swipe="swipe">
    <div 
        class="rd-swipe-item" 
        :style="{ 'background-image': `url(${img})` }" 
        v-for="(img, index) in imgs">
    </div>
</rd-swipe>
<script>
import rdSwipe from 'vue-slide'
export default {
  data () {
    return {
      swipe: {
        activeIndex: 0
      },
      imgs: [
        'http://covteam.u.qiniudn.com/test18.jpg',
        'http://covteam.u.qiniudn.com/test19.jpg',
        'http://covteam.u.qiniudn.com/test20.jpg',
        'http://covteam.u.qiniudn.com/test21.jpg'
      ]
    }
  }
}
</script>

Advance

<template>
  <div id="app">
    <div class="swiper-box">
      <div class="contacts">
        <div 
          class="contact"
          :class="{ 'active': index === swipe.activeIndex }" 
          v-for="(contact, index) in contacts"
          @click="turnTo(index)"
        >
          {{contact.text}}
        </div>
      </div>
      <rd-swipe :swipe="swipe">
        <div class="rd-swipe-item" :style="{ 'background-image': `url(${img})` }" v-for="(img, index) in imgs">
        </div>
      </rd-swipe>
    </div>
  </div>
</template>

<script>
import rdSwipe from './Slide.vue'
export default {
  data () {
    return {
      swipe: {
        activeIndex: 0
      },
      contacts: [{
        text: 'Page 1'
      }, {
        text: 'Page 2'
      }, {
        text: 'Page 3'
      }, {
        text: 'Page 4'
      }],
      imgs: [
        'http://covteam.u.qiniudn.com/test18.jpg',
        'http://covteam.u.qiniudn.com/test19.jpg',
        'http://covteam.u.qiniudn.com/test20.jpg',
        'http://covteam.u.qiniudn.com/test21.jpg'
      ]
    }
  },
  components: {
    rdSwipe
  },
  methods: {
    turnTo (index) {
      this.$children.map(swipe => {
          if (swipe.turnTo) {
              swipe.turnTo(index)
          }
      })
    }
  }
}
</script>

License

The MIT License