elemefe / vue-swipe Goto Github PK

A touch slider for vue.js.

HTML 2.46% JavaScript 6.88% Vue 90.66%

vue-swipe's Introduction

vue-swipe

vue-swipe is a touch slider for Vue.js.

Install

$ npm install vue-swipe

Import

Import using module

Import components to your project:

require('vue-swipe/dist/vue-swipe.css');

// in ES6 modules
import { Swipe, SwipeItem } from 'vue-swipe';

// in CommonJS
const { Swipe, SwipeItem } = require('vue-swipe');

// in Global variable
const { Swipe, SwipeItem } = VueSwipe;

And register components:

Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);

Import using script tag

<link rel="stylesheet" href="../node-modules/vue-swipe/dist/vue-swipe.css" charset="utf-8">
<script src="../node-modules/vue-swipe/dist/vue-swipe.js"></script>

const vueSwipe = VueSwipe.Swipe;
const vueSwipeItem = VueSwipe.SwipeItem;

new Vue({
  el: 'body',
  components: {
    'swipe': vueSwipe,
    'swipe-item': vueSwipeItem
  }
});

Usage

Work on a Vue instance:

<swipe class="my-swipe">
  <swipe-item class="slide1"></swipe-item>
  <swipe-item class="slide2"></swipe-item>
  <swipe-item class="slide3"></swipe-item>
</swipe>

.my-swipe {
  height: 200px;
  color: #fff;
  font-size: 30px;
  text-align: center;
}

.slide1 {
  background-color: #0089dc;
  color: #fff;
}

.slide2 {
  background-color: #ffd705;
  color: #000;
}

.slide3 {
  background-color: #ff2d4b;
  color: #fff;
}

Options

Props

Option	Type	Description	Default
speed	Number	Speed of animation	300
defaultIndex	Number	Start swipe item index	0
disabled	Boolean	Disable user drag swipe item	false
auto	Number	Delay of auto slide	3000
continuous	Boolean	Create an infinite slider without endpoints	true
showIndicators	Boolean	Show indicators on slider bottom	true
noDragWhenSingle	Boolean	Do not drag when there is only one swipe-item	true
prevent	Boolean	`preventDefault` when touch start, useful for some lower version Android Browser (4.2, etc)	false
propagation	Boolean	solve nesting	false
disabled	Boolean	disabled user swipe item	false

Events

Event Name	Description	params
change	triggers when current swipe-item change	new swipe item Index, old swipe item Index

FAQ

How to programminly swipe to an item?

Use ref and call goto() method.

this.$refs.swipe.goto(newIndex)

For more details, please refer to example code.

Development

Watching with hot-reload:

$ npm run dev

Develop on real remote device:

$ npm run remote-dev {{ YOUR IP ADDRESS }}

License

MIT

vue-swipe's People

Contributors

Stargazers

Watchers

Forkers

baiyaaaaa gogu wyrover iqingting lacerba shipfi vue-webpack louisanikita eric6356 venyxiong jiehwa napster99 nodejsgao mpersonal 3chenguo brysalazar12 songguang-2010 akifo zdfsilence lelesbox zjhr ym31316120 lottid think2011 darrencoding teng2015 yushisan freemindhack walterthehandsome limingziqiang nigulasikk hanmichael ianguyue fanarming hualinlin wangwenbo000 wangzhiwei1888 wangbricks li-xianfeng vebin workwsl yuxiaoyujun bingyuchenxiao jason618 athena0304 longoura julietzhuliming knight0214 lixsh8 l5071134 kingpengzero looknd zhanghuan1989 sevenegg wormgirlorganization yujie1029 imjerrybao jcto santinodu sutootototo2002 utopia1991 yangsijia287940716 leungkaming fangbao-0418 zfang0620ls 401193007 athiwatp mib200 llylife mr921112 amayergogh dongleizi jzxyouok andygoo brianzhang wmmlx olivervin xulin790 tristan-liao blackie4 cassiexue yxwu25 free-acmen wangpq lamb2014 hualidekongbai felix1226 terryzwei killerlei l2399474790 easymomo insomnia2code is00hcw whatilove ruandru gleancoder1116 crews yuzexia well-monkey whtsky

vue-swipe's Issues

同步了 “add goto event” 更新后，index失效

如题，同步后，当swipe时候，原本显示的白色标点不会改变，且执行goto event也不能跳转到指定index啊

图片超大时，滑动图片可能会导致页面不必要的重绘

发现可滑动的区域，并没有单独提升为一个层。所以在图片超大的情况下，可能会导致页面产生不必要的重绘。

见下图：

解决方法就是在 .mint-swipe, .mint-swipe-items-wrap 这里面将滑动区域整体提升为一个单独的层

组件销毁后仍会进行重新渲染导致抛出错误

如果组件在销毁的前一刻恰巧发生了 swipe-item 子组件的变动，那么将会触发 reInitPages 的计时器，组件销毁后仍然会执行 reInitPages，导致组件抛出错误。

组件css问题

组件倒是引进去了，但是显示的效果不是那养的，应该横排但是是竖排的，好像css存在问题。
这个标签出现在了html文档中

sync with npm

hi~ I want to use v2.2.0 from npm, but the latest version on it is v2.0.3. How about sync with npm ?

Web based demo?

Any chance you could add a web based demo so we could see it in action before cloning?

移动端切换的时候会引起页面其他地方图片、文字模糊

移动端使用vue-swipe，在切换的时候会引起页面其他地方图片、文字模糊，等切换完毕又可以恢复清晰。PC端则不会

Failed to resolve directive: el (found in component <mt-swipe>)

`require('vue-swipe/dist/vue-swipe.css')

import { Swipe, SwipeItem } from 'vue-swipe'

export default ({
components: {
'swipe': Swipe,
'swipe-item': SwipeItem
}
})`

<template> <swipe class="my-swipe"> <swipe-item class="slide1">Slide1</swipe-item> <swipe-item class="slide2">Slide2</swipe-item> <swipe-item class="slide3">Slide3</swipe-item> </swipe> </template>

This code use to work with versions of Vue 2.0

组件化时报错？

<template>

    <swipe class="my-swipe">
        <swipe-item class="slide1"></swipe-item>
        <swipe-item class="slide2"></swipe-item>
        <swipe-item class="slide3"></swipe-item>
    </swipe>
</template>

<script>
require('vue-swipe/dist/vue-swipe.css');
// in ES6 modules
import { Swipe, SwipeItem } from 'vue-swipe';

export default {
  components: {
    'swipe': Swipe,
    'swipe-item': SwipeItem
  }
}
</script>

错误代码
[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in component <mt-swipe>)

Invalid prop: type check failed for prop "auto". Expected Number, got String.

I get a [Vue warn] when I initialize the component like this:

<swipe auto="7000">

> [Vue warn]: Invalid prop: type check failed for prop "auto". Expected Number, got String. 
(found in component <mt-swipe>)

It seems to be parsing 7000 as a string, but for my purposes this is the simplest, most-straightforward way to configure this. Is there a better way to set this prop while keeping it as an attribute in the template?

Clickable indicators

Hello,

Is it possible to go to a page when clicked on the indicator in the bottom?

引入插件后发现样式没有引入，什么情况？

import { Swipe, SwipeItem } from 'vue-swipe';
export default {
  data () {
  },
  components: {
     Swipe,SwipeItem
   }
}

这样使用的

Github生涯第一次提issue，请多多指教😊

代码在这里another vue-swipe

 <swipe class="my-swipe" :speed="900"  :show-indicators="true" :no-drag="false">
        <swipe-item class="slide1" v-on:click="swipeItemClick(1)">
            <img style="height: 6.4rem;width: 100%;" src="../../../resources/image/wtImg.png"/>
        </swipe-item>
        <swipe-item class="slide2" v-on:click="swipeItemClick(2)">
            <img style="height: 6.4rem;width: 100%;" src="../../../resources/image/wtImg.png"/>
        </swipe-item>
    </swipe>