zyronon
6 years ago
5 changed files with 357 additions and 11 deletions
@ -0,0 +1,22 @@
@@ -0,0 +1,22 @@
|
||||
<template> |
||||
<div id="base-slide-item" ref="slideItem"> |
||||
<slot></slot> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "BaseSlideItem" |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
#base-slide-item { |
||||
width: 100%; |
||||
height: 100%; |
||||
/*flex: 1;*/ |
||||
/*flex-shrink: 1;*/ |
||||
overflow-y: scroll; |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,201 @@
@@ -0,0 +1,201 @@
|
||||
<template> |
||||
<div id="base-slide-wrapper" ref="slideWrapper"> |
||||
<div id="base-slide-list" ref="slideList" |
||||
@touchstart="touchStart($event)" |
||||
@touchmove="touchMove($event)" |
||||
@touchend="touchEnd($event)"> |
||||
<slot></slot> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "BaseSlideList", |
||||
created() { |
||||
// console.log('created',this.$refs) |
||||
}, |
||||
data() { |
||||
return { |
||||
wrapperWidth: 0, |
||||
|
||||
startLocationX: 0, |
||||
startLocationY: 0, |
||||
|
||||
lastLocationX: 0, |
||||
lastLocationY: 0, |
||||
|
||||
moveXDistance: 0, |
||||
moveYDistance: 0, |
||||
|
||||
judgeValue: 20, |
||||
startTime: 0, |
||||
|
||||
currentSlideItemIndex: 0, |
||||
isDrawRight: 0, |
||||
isCanRightWiping: false, |
||||
isCanDownWiping: false, |
||||
isNeedCheck: true, |
||||
|
||||
slideList: null, |
||||
slideItems: null, |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.slideList = this.$refs.slideList |
||||
this.slideItems = this.slideList.children |
||||
this.wrapperWidth = this.$getCss(this.slideList, 'width') |
||||
console.log(this.wrapperWidth) |
||||
this.slideList.style.width = this.slideItems.length * this.wrapperWidth + 'px' |
||||
}, |
||||
methods: { |
||||
touchStart(e) { |
||||
this.slideList.style.transition = 'none' |
||||
// indicator.style.transition = 'none' |
||||
|
||||
this.startLocationX = e.touches[0].pageX |
||||
this.startLocationY = e.touches[0].pageY |
||||
// console.log(' this.startLocationX', this.startLocationX) |
||||
// console.log(' this.startLocationY', this.startLocationY) |
||||
this.startTime = Date.now() |
||||
}, |
||||
touchMove(e) { |
||||
this.lastLocationX = e.touches[0].pageX |
||||
this.lastLocationY = e.touches[0].pageY |
||||
this.moveXDistance = this.lastLocationX - this.startLocationX |
||||
this.moveYDistance = this.lastLocationY - this.startLocationY |
||||
|
||||
// console.log('moveXDistance', this.moveXDistance) |
||||
// console.log('moveYDistance', this.moveYDistance) |
||||
|
||||
this.isDrawRight = this.moveXDistance < 0 |
||||
|
||||
// console.log(this.isDrawRight) |
||||
|
||||
this.checkDirection() |
||||
if (this.isCanRightWiping) { |
||||
//禁止在index=0页面的时候，向左划 |
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) { |
||||
return |
||||
} |
||||
//禁止在最后页面的时候，向右划 |
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) { |
||||
return |
||||
} |
||||
e.stopImmediatePropagation() |
||||
e.stopPropagation() |
||||
|
||||
if (this.isDrawRight) { |
||||
this.slideList.style.left = -this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance + this.judgeValue + 'px' |
||||
} else { |
||||
this.slideList.style.left = -this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance - this.judgeValue + 'px' |
||||
} |
||||
} |
||||
}, |
||||
touchEnd(e) { |
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) { |
||||
return |
||||
} |
||||
//禁止在最后页面的时候，向右划 |
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) { |
||||
return |
||||
} |
||||
|
||||
this.slideList.style.transition = 'all .3s' |
||||
|
||||
let endTime = Date.now() |
||||
let gapTime = endTime - this.startTime |
||||
|
||||
// 如果 |
||||
if (Math.abs(this.moveXDistance) < 20) { |
||||
gapTime = 1000 |
||||
} |
||||
if (Math.abs(this.moveXDistance) > (this.wrapperWidth / 3)) { |
||||
gapTime = 100 |
||||
} |
||||
|
||||
if (gapTime < 150) { |
||||
if (this.isDrawRight) { |
||||
this.currentSlideItemIndex += 1 |
||||
} else { |
||||
this.currentSlideItemIndex -= 1 |
||||
} |
||||
this.slideList.style.left = -(this.currentSlideItemIndex) * this.wrapperWidth + 'px' |
||||
|
||||
} else { |
||||
this.slideList.style.left = -(this.currentSlideItemIndex) * this.wrapperWidth + 'px' |
||||
} |
||||
this.resetConfig() |
||||
}, |
||||
resetConfig() { |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = false |
||||
this.isNeedCheck = true |
||||
this.moveXDistance = 0 |
||||
this.moveYDistance = 0 |
||||
}, |
||||
checkDirection() { |
||||
if (!this.isNeedCheck) { |
||||
// console.log('不需要检测了') |
||||
return |
||||
} |
||||
if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) { |
||||
// console.log((Math.abs(this.moveXDistance) * 10)) |
||||
// console.log((Math.abs(this.moveYDistance) * 10)) |
||||
// console.log((Math.abs(this.moveYDistance))) |
||||
//y移动距离为0 ，angle为Infinty |
||||
if (Math.abs(this.moveYDistance) === 0) { |
||||
//左右划 |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = true |
||||
this.isNeedCheck = false |
||||
return; |
||||
} |
||||
//X 除以 Y |
||||
let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10) |
||||
// console.log('angle', angle); |
||||
if (angle > 0.7 && angle < 1.3) { |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
|
||||
// console.log('x------------', moveXDistance) |
||||
// console.log('y------------', moveYDistance) |
||||
// console.log('角度------------', angle) |
||||
|
||||
if (angle < 0.6) { |
||||
//上下划 |
||||
this.isCanDownWiping = true |
||||
this.isCanRightWiping = false |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
if (angle > 5) { |
||||
//左右划 |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = true |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
#base-slide-wrapper { |
||||
width: 100%; |
||||
overflow: hidden; |
||||
|
||||
#base-slide-list { |
||||
display: flex; |
||||
left: 0; |
||||
/*transition: all 0.3s ease 0s;*/ |
||||
height: 100%; |
||||
width: 100%; |
||||
position: relative; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue