Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image Swipe Full Screen #79

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Image Swipe Full Screen #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b3a846
add Image Swipe Full Screen
May 7, 2018
e94c4ee
add Image Swipe Full Screen too
May 7, 2018
4d0746b
add index+1
May 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ Vue.component('swipe-item', SwipeItem);
### Import using script tag

``` html
<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>
<link rel="stylesheet" href="../dist/vue-swipe.css" charset="utf-8">
<script src="../dist/vue-swipe.js"></script>
```

``` js
Expand Down Expand Up @@ -106,6 +106,9 @@ Work on a Vue instance:
| 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 |
| showNumber | Boolean | Show the number of index on slider | false |
| zoom | Boolean | Full screen display of slider pictures | false |


### Events

Expand Down
2 changes: 1 addition & 1 deletion dist/vue-swipe.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/vue-swipe.js
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions example/example.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,15 @@

<br>

<h1>Image Full Screen</h1>
<swipe class="my-swipe" :show-number='true' :zoom='true' :auto='test'>
<swipe-item class="slide1"><img src="http://media.expedia.com/hotels/3000000/2990000/2980900/2980809/2980809_35_b.jpg"></swipe-item>
<swipe-item class="slide2"><img src="http://media.expedia.com/hotels/3000000/2990000/2980900/2980809/2980809_34_b.jpg"></swipe-item>
<swipe-item class="slide3"><img src="http://media.expedia.com/hotels/3000000/2990000/2980900/2980809/2980809_41_b.jpg"></swipe-item>
</swipe>

<br>

<h1>Change swipe</h1>
<swipe class="my-swipe" ref="mySwipe2" :auto="0" :continuous="false" :show-indicators="false" @change="changeSwipe">
<swipe-item class="slide1">Slide1</swipe-item>
Expand Down
108 changes: 108 additions & 0 deletions example/scriptTag.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1.0, minimum-scale=1.0">
<title>vue-swipe examples</title>
<link rel="stylesheet" href="../dist/vue-swipe.css">
<style scoped>
.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;
}
</style>


</head>
<body>
<div id="app2">
<div>

<h1>Image Full Screen</h1>
<swipe class="my-swipe" :show-number='true' :zoom='true' :auto='test'>
<swipe-item class="slide1"><img src="http://media.expedia.com/hotels/3000000/2990000/2980900/2980809/2980809_35_b.jpg"></swipe-item>
<swipe-item class="slide2"><img src="http://media.expedia.com/hotels/3000000/2990000/2980900/2980809/2980809_34_b.jpg"></swipe-item>
<swipe-item class="slide3"><img src="http://media.expedia.com/hotels/3000000/2990000/2980900/2980809/2980809_41_b.jpg"></swipe-item>
</swipe>
<br>


<h1>Default</h1>
<swipe class="my-swipe" :show-number='true'>
<swipe-item class="slide1">Slide1</swipe-item>
<swipe-item class="slide2">Slide2</swipe-item>
<swipe-item class="slide3">Slide3</swipe-item>
</swipe>

<br>

<h1>Change swipe</h1>
<swipe class="my-swipe" ref="mySwipe2" :auto="0" :continuous="false" :show-indicators="false" @change="changeSwipe">
<swipe-item class="slide1">Slide1</swipe-item>
<swipe-item class="slide2">Slide2</swipe-item>
<swipe-item class="slide3">Slide3</swipe-item>
</swipe>

<button @click="goto(2)">goto page 3</button>
<button @click="goto(0)">goto page 1</button>

<br>

<h1>Drag single swipe</h1>
<swipe class="my-swipe" :speed="900" :auto="0" :show-indicators="false" :no-drag-when-single="false">
<swipe-item class="slide1">SINGLE SLIDE</swipe-item>
</swipe>

<br>

<h1>Default index</h1>
<swipe class="my-swipe" :defaultIndex="1" :auto="0">
<swipe-item class="slide1">Slide1</swipe-item>
<swipe-item class="slide2">Slide2</swipe-item>
<swipe-item class="slide3">Slide3</swipe-item>
</swipe>
</div>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="../dist/vue-swipe.js"></script>
<script>
const vueSwipe = VueSwipe.Swipe;
const vueSwipeItem = VueSwipe.SwipeItem;
VueSwipe.Swipe.props.showNumber = true
var tt = new Vue({
el: '#app2',
data:{
test:0
},
components: {
swipe: vueSwipe,
swipeItem: vueSwipeItem
},
methods: {
goto(index) {
this.$refs.mySwipe2.goto(index);
},
changeSwipe(newIndex, oldIndex) {
console.log(`swipe from ${oldIndex} to ${newIndex}`);
}
}
});
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/swipe-item.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
</div>
</template>

<script>
<script type="text/ecmascript-6">
export default {
name: 'mt-swipe-item',

Expand Down
105 changes: 103 additions & 2 deletions src/swipe.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
overflow: hidden;
position: relative;
height: 100%;
color: #fff;
text-align: center;
}
.mint-swipe-items-wrap {
position: relative;
Expand Down Expand Up @@ -43,10 +45,54 @@
.mint-swipe-indicator.is-active {
background: #fff;
}
.mint-swipe-numbers {
position: absolute;
top: 0;
right: 0;
background: rgba(0,0,0,.5);
color: #fff;
}
.mint-swipe.is-zoom{
position: fixed;
top: 0;
left: 0;
z-index: 90;
width:100%;
height:100%;
background: #000;
}
.mint-swipe.is-zoom .mint-swipe-zoom{
position: absolute;
top: 0;
left: 0;
z-index: 98;
width:100%;
height:100%;
background-color:transparent;
}
.mint-swipe.is-zoom .mint-swipe-numbers{
top: auto;
bottom:20px;
right: auto;
left: 50%;
transform: translateX(-50%);
background-color:transparent;
}
.mint-swipe.is-zoom .mint-swipe-item{
background: transparent;
}
.mint-swipe.is-zoom .mint-swipe-item img {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: auto;
transform: translateY(-50%);
}
</style>

<template>
<div class="mint-swipe">
<div class="mint-swipe" :class="{ 'is-zoom': zoomState }">
<div class="mint-swipe-items-wrap" ref="wrap">
<slot></slot>
</div>
Expand All @@ -56,6 +102,10 @@
:key="$index"
:class="{ 'is-active': $index === index }"></div>
</div>
<div class="mint-swipe-numbers" v-show="showNumber">
{{(index+1)+'/'+pages.length}}
</div>
<div class="mint-swipe-zoom" v-show="zoom" @click="zoomOutEvent($event)"></div>
</div>
</template>

Expand All @@ -80,7 +130,8 @@
pages: [],
timer: null,
reInitTimer: null,
noDrag: false
noDrag: false,
zoomState: false
};
},

Expand Down Expand Up @@ -115,6 +166,11 @@
default: true
},

showNumber: {
type: Boolean,
default: false
},

noDragWhenSingle: {
type: Boolean,
default: true
Expand All @@ -128,10 +184,29 @@
propagation: {
type: Boolean,
default: false
},

zoom: {
type: Boolean,
default: false
}

},

watch:{
auto:function (val, oldVal) {
if (val > 0) {
this.timer = setInterval(() => {
if (!this.dragging && !this.animating) {
this.next();
}
}, val);
}else{
clearInterval(this.timer)
}
}
},

methods: {
swipeItemCreated() {
if (!this.ready) return;
Expand Down Expand Up @@ -515,7 +590,28 @@
if (!this.dragging) return;
this.doOnTouchEnd(event);
this.dragging = false;
},

zoomInEvent(event) {
this.zoomState = true
clearInterval(this.timer)
event.stopPropagation();
event.preventDefault();
},

zoomOutEvent(event) {
this.zoomState = false;
if (this.auto > 0) {
this.timer = setInterval(() => {
if (!this.dragging && !this.animating) {
this.next();
}
}, this.auto);
}
event.stopPropagation();
event.preventDefault();
}

},

destroyed() {
Expand Down Expand Up @@ -544,6 +640,11 @@

var element = this.$el;

// for full screen
if (this.zoom) {
element.addEventListener('click', this.zoomInEvent);
}

// for mobile
element.addEventListener('touchstart', this.dragStartEvent);
element.addEventListener('touchmove', this.dragMoveEvent);
Expand Down
4 changes: 3 additions & 1 deletion webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ module.exports = {
library: 'VueSwipe',
libraryTarget: 'commonjs2',
filename: 'vue-swipe.js',
path: resolve('dist'),
path: resolve('dist'),
libraryTarget: 'umd', // 输出格式
umdNamedDefine: true // 是否将模块名称作为 AMD 输出的命名空间
},
module: {
rules: [
Expand Down