|
|
|
@ -1,12 +1,12 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div id="SlideImgs"> |
|
|
|
<div id="SlideImgs"> |
|
|
|
<div class="img-slide-wrapper" ref="wap"> |
|
|
|
<div class="img-slide-wrapper"> |
|
|
|
<div class="img-slide-list" |
|
|
|
<div class="img-slide-list" |
|
|
|
ref="list" |
|
|
|
ref="wrapperEl" |
|
|
|
@touchstart="touchstart" |
|
|
|
@touchstart="touchStart" |
|
|
|
@touchmove="touchmove" |
|
|
|
@touchmove="touchMove" |
|
|
|
@touchend="touchend"> |
|
|
|
@touchend="touchEnd"> |
|
|
|
<div class="img-slide-item" v-for="img in modelValue.imgs"> |
|
|
|
<div class="img-slide-item" v-for="img in props.modelValue.imgs"> |
|
|
|
<img :ref="setItemRef" :src="img"> |
|
|
|
<img :ref="setItemRef" :src="img"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -20,11 +20,20 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script setup lang="jsx"> |
|
|
|
import enums from "../../utils/enums"; |
|
|
|
import enums from "../../utils/enums"; |
|
|
|
import globalMethods from '../../utils' |
|
|
|
import Utils from '../../utils' |
|
|
|
import {mat4} from 'gl-matrix' |
|
|
|
import {mat4} from 'gl-matrix' |
|
|
|
import {cloneDeep} from "lodash"; |
|
|
|
import {onMounted, reactive, ref} from "vue"; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
getSlideDistance, |
|
|
|
|
|
|
|
slideInit, |
|
|
|
|
|
|
|
slideReset, |
|
|
|
|
|
|
|
slideTouchEnd, |
|
|
|
|
|
|
|
slideTouchMove, |
|
|
|
|
|
|
|
slideTouchStart |
|
|
|
|
|
|
|
} from "../../pages/slideHooks/common"; |
|
|
|
|
|
|
|
import {SlideType} from "../../utils/const_var"; |
|
|
|
|
|
|
|
|
|
|
|
let out = new Float32Array([ |
|
|
|
let out = new Float32Array([ |
|
|
|
0, 0, 0, 0, |
|
|
|
0, 0, 0, 0, |
|
|
|
@ -38,12 +47,8 @@ let ov = new Float32Array([ |
|
|
|
0, 0, 1, 0, |
|
|
|
0, 0, 1, 0, |
|
|
|
0, 0, 0, 1, |
|
|
|
0, 0, 0, 1, |
|
|
|
]); |
|
|
|
]); |
|
|
|
let original = cloneDeep(ov) |
|
|
|
|
|
|
|
const rectMap = new Map() |
|
|
|
const rectMap = new Map() |
|
|
|
export default { |
|
|
|
const props = defineProps({ |
|
|
|
name: "SlideImgs", |
|
|
|
|
|
|
|
components: {}, |
|
|
|
|
|
|
|
props: { |
|
|
|
|
|
|
|
modelValue: { |
|
|
|
modelValue: { |
|
|
|
type: Object, |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
default() { |
|
|
|
@ -141,323 +146,192 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}) |
|
|
|
data() { |
|
|
|
const judgeValue = 20 |
|
|
|
return { |
|
|
|
const wrapperEl = ref(null) |
|
|
|
itemRefs: [], |
|
|
|
|
|
|
|
baseActiveIndex: 0, |
|
|
|
const state = reactive({ |
|
|
|
progress: 0, |
|
|
|
name: 'SlideHorizontal', |
|
|
|
cycleFn: null, |
|
|
|
localIndex: 0, |
|
|
|
state: 'play',//stop,custom |
|
|
|
needCheck: true, |
|
|
|
|
|
|
|
isTwo: true, |
|
|
|
startX: 0, |
|
|
|
next: false, |
|
|
|
startY: 0, |
|
|
|
wrapper: {width: 0, height: 0, childrenLength: 0}, |
|
|
|
|
|
|
|
|
|
|
|
moveX: 0, |
|
|
|
|
|
|
|
moveY: 0, |
|
|
|
|
|
|
|
width: document.body.clientWidth, |
|
|
|
|
|
|
|
startTime: 0, |
|
|
|
|
|
|
|
index: 0, |
|
|
|
|
|
|
|
isDrawRight: false, |
|
|
|
|
|
|
|
isDrawDown: false, |
|
|
|
|
|
|
|
isTwo: false, |
|
|
|
|
|
|
|
store: { |
|
|
|
|
|
|
|
scale: 1 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
result: { |
|
|
|
|
|
|
|
width: 414, |
|
|
|
|
|
|
|
height: 737 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
x: 0, |
|
|
|
|
|
|
|
y: 79, |
|
|
|
|
|
|
|
scale: 1, |
|
|
|
|
|
|
|
maxScale: 3, |
|
|
|
|
|
|
|
minScale: 0.5, |
|
|
|
|
|
|
|
point1: {x: 0, y: 0}, |
|
|
|
|
|
|
|
point2: {x: 0, y: 0}, |
|
|
|
|
|
|
|
diff: {x: 0, y: 0}, |
|
|
|
|
|
|
|
lastPointermove: {x: 0, y: 0}, |
|
|
|
|
|
|
|
lastPoint1: {x: 0, y: 0}, |
|
|
|
|
|
|
|
lastPoint2: {x: 0, y: 0}, |
|
|
|
|
|
|
|
lastCenter: {x: 0, y: 0}, |
|
|
|
|
|
|
|
startCenter: {x: 0, y: 0}, |
|
|
|
|
|
|
|
a: {}, |
|
|
|
|
|
|
|
b: {}, |
|
|
|
|
|
|
|
last: { |
|
|
|
last: { |
|
|
|
ratio: 1, |
|
|
|
|
|
|
|
point1: {x: 0, y: 0}, |
|
|
|
point1: {x: 0, y: 0}, |
|
|
|
point2: {x: 0, y: 0}, |
|
|
|
point2: {x: 0, y: 0}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
start: { |
|
|
|
start: { |
|
|
|
|
|
|
|
x: 0, y: 0, |
|
|
|
point1: {x: 0, y: 0}, |
|
|
|
point1: {x: 0, y: 0}, |
|
|
|
point2: {x: 0, y: 0}, |
|
|
|
point2: {x: 0, y: 0}, |
|
|
|
} |
|
|
|
center: {x: 0, y: 0}, |
|
|
|
} |
|
|
|
time: 0 |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
move: {x: 0, y: 0}, |
|
|
|
this.width = document.body.clientWidth |
|
|
|
itemRefs: [], |
|
|
|
}, |
|
|
|
status: 'play',//stop,custom |
|
|
|
watch: { |
|
|
|
progress: 0, |
|
|
|
state(newVal, oldVal) { |
|
|
|
cycleFn: null, |
|
|
|
return |
|
|
|
}) |
|
|
|
console.log('newVal', newVal) |
|
|
|
onMounted(() => { |
|
|
|
if (newVal === 'play') requestAnimationFrame(this.cycleFn) |
|
|
|
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL) |
|
|
|
if (newVal === 'stop') cancelAnimationFrame(this.cycleFn) |
|
|
|
|
|
|
|
if (newVal === 'custom') cancelAnimationFrame(this.cycleFn) |
|
|
|
state.cycleFn = () => { |
|
|
|
} |
|
|
|
if (state.status !== 'play') return cancelAnimationFrame(state.cycleFn) |
|
|
|
}, |
|
|
|
if (state.progress < props.modelValue.imgs.length * 100) { |
|
|
|
mounted() { |
|
|
|
state.progress += .4 |
|
|
|
this.cycleFn = () => { |
|
|
|
state.localIndex = parseInt(state.progress / 100) |
|
|
|
if (this.state !== 'play') return cancelAnimationFrame(this.cycleFn) |
|
|
|
if (wrapperEl.value) { |
|
|
|
if (this.progress < this.modelValue.imgs.length * 100) { |
|
|
|
Utils.$setCss(wrapperEl.value, 'transition-duration', `300ms`) |
|
|
|
this.progress += .4 |
|
|
|
Utils.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state)}px, 0px, 0px)`) |
|
|
|
this.index = parseInt(this.progress / 100) |
|
|
|
|
|
|
|
if (this.$refs.list) { |
|
|
|
|
|
|
|
globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`) |
|
|
|
|
|
|
|
globalMethods.$setCss(this.$refs.list, 'transform', |
|
|
|
|
|
|
|
`translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.progress = 0 |
|
|
|
state.progress = 0 |
|
|
|
// cancelAnimationFrame(this.cycleFn) |
|
|
|
// cancelAnimationFrame(this.cycleFn) |
|
|
|
} |
|
|
|
} |
|
|
|
requestAnimationFrame(this.cycleFn) |
|
|
|
requestAnimationFrame(state.cycleFn) |
|
|
|
} |
|
|
|
} |
|
|
|
return |
|
|
|
requestAnimationFrame(state.cycleFn) |
|
|
|
// requestAnimationFrame(this.cycleFn) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
let x = 0 |
|
|
|
function touchStart(e) { |
|
|
|
let y = 0 |
|
|
|
|
|
|
|
let scale = 1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let isDrag = false // 按下标识 |
|
|
|
|
|
|
|
const image = document.querySelector(`.img-slide-list`); |
|
|
|
|
|
|
|
let tt = new Map() |
|
|
|
|
|
|
|
image.addEventListener('wheel', e => { |
|
|
|
|
|
|
|
this.itemRefs[this.index].style['transition-duration'] = '0ms'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let {clientX, clientY, deltaY} = e; |
|
|
|
|
|
|
|
let rect = {x: 0, y: 0} |
|
|
|
|
|
|
|
if (tt.has(this.index)) { |
|
|
|
|
|
|
|
rect = tt.get(this.index) |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
rect = this.itemRefs[this.index].getBoundingClientRect() |
|
|
|
|
|
|
|
tt.set(this.index, rect) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
clientX -= rect.x |
|
|
|
|
|
|
|
clientY -= rect.y |
|
|
|
|
|
|
|
const zoom = 1 + (deltaY < 0 ? 0.1 : -0.1); |
|
|
|
|
|
|
|
const x = clientX * (1 - zoom); |
|
|
|
|
|
|
|
const y = clientY * (1 - zoom); |
|
|
|
|
|
|
|
const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]); |
|
|
|
|
|
|
|
ov = mat4.multiply(out, t, ov); |
|
|
|
|
|
|
|
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`; |
|
|
|
|
|
|
|
// image.setAttribute("style", `transform:matrix3d(${ov.toString()});`); |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
image.addEventListener('mousedown', () => { |
|
|
|
|
|
|
|
this.itemRefs[this.index].style['transition-duration'] = '0ms'; |
|
|
|
|
|
|
|
isDrag = true |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
image.addEventListener('mousemove', (e) => { |
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
if (isDrag) { |
|
|
|
|
|
|
|
const {movementX, movementY} = e; |
|
|
|
|
|
|
|
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]); |
|
|
|
|
|
|
|
ov = mat4.multiply(out, t, ov); |
|
|
|
|
|
|
|
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
image.addEventListener('mouseup', () => { |
|
|
|
|
|
|
|
this.itemRefs[this.index].style['transition-duration'] = '300ms'; |
|
|
|
|
|
|
|
this.itemRefs[this.index].style.transform = `matrix3d(${original.toString()})`; |
|
|
|
|
|
|
|
ov = original |
|
|
|
|
|
|
|
isDrag = false |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
getCenter(a, b) { |
|
|
|
|
|
|
|
const x = (a.x + b.x) / 2; |
|
|
|
|
|
|
|
const y = (a.y + b.y) / 2; |
|
|
|
|
|
|
|
return {x, y} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 获取坐标之间的举例 |
|
|
|
|
|
|
|
getDistance(start, stop) { |
|
|
|
|
|
|
|
return Math.hypot(stop.x - start.x, stop.y - start.y); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
touchstart(e) { |
|
|
|
|
|
|
|
console.log('start', e.touches.length) |
|
|
|
console.log('start', e.touches.length) |
|
|
|
if (this.state !== 'custom') { |
|
|
|
// if (s.state !== 'custom') { |
|
|
|
this.state = 'stop' |
|
|
|
// this.state = 'stop' |
|
|
|
} |
|
|
|
// } |
|
|
|
if (e.touches.length === 1) { |
|
|
|
if (e.touches.length === 1) { |
|
|
|
this.isTwo = false |
|
|
|
state.isTwo = false |
|
|
|
globalMethods.$setCss(this.$refs.list, 'transition-duration', `0ms`) |
|
|
|
slideTouchStart(e, wrapperEl.value, state) |
|
|
|
this.startX = e.touches[0].pageX |
|
|
|
|
|
|
|
this.startY = e.touches[0].pageY |
|
|
|
|
|
|
|
this.startTime = Date.now() |
|
|
|
|
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if (this.isTwo) return |
|
|
|
if (state.isTwo) return |
|
|
|
this.isTwo = true |
|
|
|
state.isTwo = true |
|
|
|
this.itemRefs[this.index].style['transition-duration'] = '0ms'; |
|
|
|
state.itemRefs[state.localIndex].style['transition-duration'] = '0ms'; |
|
|
|
|
|
|
|
state.last.point1 = state.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}; |
|
|
|
if (e.cancelable) { |
|
|
|
state.last.point2 = state.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}; |
|
|
|
e.preventDefault(); |
|
|
|
state.start.center = Utils.getCenter(state.start.point1, state.start.point2) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function touchMove(e) { |
|
|
|
|
|
|
|
// console.log('move', e.touches.length) |
|
|
|
|
|
|
|
if (state.isTwo && e.touches.length === 1) { |
|
|
|
|
|
|
|
state.status = 'pause' |
|
|
|
|
|
|
|
Utils.$stopPropagation(e) |
|
|
|
|
|
|
|
|
|
|
|
this.last.point1 = this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}; |
|
|
|
|
|
|
|
this.last.point2 = this.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}; |
|
|
|
|
|
|
|
this.startCenter = this.getCenter(this.point1, this.point2) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
touchmove(e) { |
|
|
|
|
|
|
|
console.log('move', e.touches.length) |
|
|
|
|
|
|
|
if (this.isTwo && e.touches.length === 1) { |
|
|
|
|
|
|
|
// console.log('单手移动',) |
|
|
|
// console.log('单手移动',) |
|
|
|
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY} |
|
|
|
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY} |
|
|
|
let movementX = current.x - this.last.point1.x |
|
|
|
let movementX = current.x - state.last.point1.x |
|
|
|
let movementY = current.y - this.last.point1.y |
|
|
|
let movementY = current.y - state.last.point1.y |
|
|
|
console.log(movementX, movementY) |
|
|
|
// console.log(movementX, movementY) |
|
|
|
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]); |
|
|
|
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]); |
|
|
|
let ov1 = mat4.multiply(out, t, ov); |
|
|
|
ov = mat4.multiply(out, t, ov); |
|
|
|
this.itemRefs[this.index].style.transform = `matrix3d(${ov1.toString()})`; |
|
|
|
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`; |
|
|
|
// this.last.point1 = current |
|
|
|
state.last.point1 = current |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if (e.touches.length === 1) { |
|
|
|
if (e.touches.length === 1) { |
|
|
|
this.isTwo = false |
|
|
|
state.isTwo = false |
|
|
|
|
|
|
|
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => { |
|
|
|
this.moveX = e.touches[0].pageX - this.startX |
|
|
|
state.status = 'pause' |
|
|
|
this.moveY = e.touches[0].pageY - this.startY |
|
|
|
}, SlideType.HORIZONTAL) |
|
|
|
|
|
|
|
} else { |
|
|
|
this.isDrawRight = this.moveX < 0 |
|
|
|
state.isTwo = true |
|
|
|
this.isDrawDown = this.moveY < 0 |
|
|
|
Utils.$stopPropagation(e) |
|
|
|
|
|
|
|
state.status = 'pause' |
|
|
|
if (this.index === 0 && !this.isDrawRight) return |
|
|
|
|
|
|
|
if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
globalMethods.$setCss(this.$refs.list, 'transform', |
|
|
|
let rect = {x: 0, y: 0} |
|
|
|
`translate3d(${-this.getWidth(this.index) + |
|
|
|
if (rectMap.has(state.localIndex)) { |
|
|
|
this.moveX}px, 0px, 0px)`) |
|
|
|
rect = rectMap.get(state.localIndex) |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.isTwo = true |
|
|
|
//getBoundingClientRect在手机上获取不到值 |
|
|
|
if (e.cancelable) { |
|
|
|
let offset = $(state.itemRefs[state.localIndex]).offset() |
|
|
|
e.preventDefault(); |
|
|
|
rect = {x: offset.left, y: offset.top} |
|
|
|
|
|
|
|
rectMap.set(state.localIndex, rect) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY} |
|
|
|
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY} |
|
|
|
let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY} |
|
|
|
let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY} |
|
|
|
|
|
|
|
|
|
|
|
// 双指缩放比例，就是对应的放大倍数 |
|
|
|
// 双指缩放比例，就是对应的放大倍数 |
|
|
|
let ratio = this.getDistance(current1, current2) / this.getDistance(this.point1, this.point2); |
|
|
|
let currentRatio = Utils.getDistance(current1, current2) / Utils.getDistance(state.start.point1, state.start.point2); |
|
|
|
|
|
|
|
|
|
|
|
let rect = {x: 0, y: 0} |
|
|
|
let center = Utils.getCenter(current1, current2) |
|
|
|
if (rectMap.has(this.index)) { |
|
|
|
|
|
|
|
rect = rectMap.get(this.index) |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
//getBoundingClientRect在手机上获取不到值 |
|
|
|
|
|
|
|
let offset = $(this.itemRefs[this.index]).offset() |
|
|
|
|
|
|
|
rect.x = offset.left |
|
|
|
|
|
|
|
rect.y = offset.top |
|
|
|
|
|
|
|
rectMap.set(this.index, rect) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let center = cloneDeep(this.startCenter) |
|
|
|
|
|
|
|
center.x -= rect.x |
|
|
|
center.x -= rect.x |
|
|
|
center.y -= rect.y |
|
|
|
center.y -= rect.y |
|
|
|
let zoom = ratio |
|
|
|
//用最新的放大倍数ratio除以之前的放大ov[0]倍数，算出本次要累加放大的倍数 |
|
|
|
|
|
|
|
let zoom = currentRatio / ov[0] |
|
|
|
const x = center.x * (1 - zoom); |
|
|
|
const x = center.x * (1 - zoom); |
|
|
|
const y = center.y * (1 - zoom); |
|
|
|
const y = center.y * (1 - zoom); |
|
|
|
const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]); |
|
|
|
const t = new Float32Array([zoom, 0, 0, 0, 0, zoom, 0, 0, 0, 0, 1, 0, x, y, 0, 1,]); |
|
|
|
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov |
|
|
|
//如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵） |
|
|
|
//但这里zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵） |
|
|
|
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算 |
|
|
|
ov = mat4.multiply(out, t, original); |
|
|
|
ov = mat4.multiply(out, t, ov); |
|
|
|
|
|
|
|
|
|
|
|
let movementX = current1.x - this.last.point1.x |
|
|
|
let movementRatio = currentRatio - ov[0] |
|
|
|
let movementY = current1.y - this.last.point1.y |
|
|
|
//如果本次比例和上次的不超过0.02。那么判定为平移 |
|
|
|
let movement2X = current2.x - this.last.point2.x |
|
|
|
if (Math.abs(movementRatio) <= 0.02) { |
|
|
|
let movement2Y = current2.y - this.last.point2.y |
|
|
|
let movementX = current1.x - state.last.point1.x |
|
|
|
|
|
|
|
let movementY = current1.y - state.last.point1.y |
|
|
|
|
|
|
|
let movement2X = current2.x - state.last.point2.x |
|
|
|
|
|
|
|
let movement2Y = current2.y - state.last.point2.y |
|
|
|
|
|
|
|
|
|
|
|
let minX = Math.min(movementX, movement2X) |
|
|
|
let minX = Math.min(movementX, movement2X) |
|
|
|
let minY = Math.min(movementY, movement2Y) |
|
|
|
let minY = Math.min(movementY, movement2Y) |
|
|
|
|
|
|
|
const t1 = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, minX, minY, 0, 1,]); |
|
|
|
|
|
|
|
ov = mat4.multiply(out, t1, ov); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
console.log('minX', minX, 'minY', minY) |
|
|
|
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`; |
|
|
|
|
|
|
|
state.last.point1 = current1 |
|
|
|
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`; |
|
|
|
state.last.point2 = current2 |
|
|
|
this.last.point1 = current1 |
|
|
|
|
|
|
|
this.last.point2 = current2 |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
touchend(e) { |
|
|
|
|
|
|
|
console.log('end', e.touches.length, this.isTwo) |
|
|
|
|
|
|
|
if (this.isTwo && e.touches.length === 1) { |
|
|
|
|
|
|
|
//双指绽放，但只松开了一只手 |
|
|
|
|
|
|
|
this.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY} |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
if (this.isTwo) { |
|
|
|
|
|
|
|
ov = original |
|
|
|
|
|
|
|
this.itemRefs[this.index].style['transition-duration'] = '300ms'; |
|
|
|
|
|
|
|
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`; |
|
|
|
|
|
|
|
// if (this.state !== 'custom') { |
|
|
|
|
|
|
|
// this.state = 'play' |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
// if (e.touches.length) { |
|
|
|
|
|
|
|
// this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY} |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function touchEnd(e) { |
|
|
|
|
|
|
|
console.log('end', e.touches.length, state.isTwo) |
|
|
|
|
|
|
|
//双指缩放，但只松开了一只手 |
|
|
|
|
|
|
|
if (state.isTwo && e.touches.length === 1) { |
|
|
|
|
|
|
|
Utils.$stopPropagation(e) |
|
|
|
|
|
|
|
state.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if (this.index === 0 && !this.isDrawRight) return |
|
|
|
if (state.isTwo) { |
|
|
|
if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return |
|
|
|
Utils.$stopPropagation(e) |
|
|
|
|
|
|
|
state.itemRefs[state.localIndex].style['transition-duration'] = '300ms'; |
|
|
|
let canSlide = this.width / 5 < Math.abs(this.moveX); |
|
|
|
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`; |
|
|
|
if (Date.now() - this.startTime < 40) canSlide = false |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (canSlide) { |
|
|
|
|
|
|
|
if (this.isDrawRight) { |
|
|
|
|
|
|
|
this.index += 1 |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
this.index -= 1 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.state = 'custom' |
|
|
|
|
|
|
|
this.progress = (this.index + 1) * 100 |
|
|
|
|
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if (this.state !== 'custom') { |
|
|
|
slideTouchEnd(e, state, canNext, |
|
|
|
this.state = 'play' |
|
|
|
() => { |
|
|
|
} |
|
|
|
state.status = 'custom' |
|
|
|
} |
|
|
|
state.progress = (state.localIndex + 1) * 100 |
|
|
|
globalMethods.$setCss(this.$refs.list, 'transition-duration', `300ms`) |
|
|
|
|
|
|
|
globalMethods.$setCss(this.$refs.list, 'transform', |
|
|
|
|
|
|
|
`translate3d(${-this.getWidth(this.index)}px, 0px, 0px)`) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
getWidth(index) { |
|
|
|
|
|
|
|
return index * this.width |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
setItemRef(el) { |
|
|
|
() => { |
|
|
|
if (el) { |
|
|
|
if (state.status !== 'custom') { |
|
|
|
this.itemRefs.push(el) |
|
|
|
state.status = 'play' |
|
|
|
|
|
|
|
requestAnimationFrame(state.cycleFn) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
beforeUpdate() { |
|
|
|
|
|
|
|
this.itemRefs = [] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
updated() { |
|
|
|
|
|
|
|
console.log(this.itemRefs) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
toggle() { |
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
if (this.state === 'stop') { |
|
|
|
|
|
|
|
this.state = 'play' |
|
|
|
|
|
|
|
requestAnimationFrame(this.cycleFn) |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
this.state = 'stop' |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
) |
|
|
|
getProgressWidth(index) { |
|
|
|
slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, null) |
|
|
|
if (this.progress >= (index + 1) * 100) return {width: '100%'} |
|
|
|
|
|
|
|
return {width: `${this.progress - index * 100 < 0 ? 0 : this.progress - index * 100}%`} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getProgressWidth(index) { |
|
|
|
|
|
|
|
if (state.progress >= (index + 1) * 100) return {width: '100%'} |
|
|
|
|
|
|
|
return {width: `${state.progress - index * 100 < 0 ? 0 : state.progress - index * 100}%`} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function setItemRef(el) { |
|
|
|
|
|
|
|
el && state.itemRefs.push(el) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function canNext(isNext) { |
|
|
|
|
|
|
|
return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.modelValue.imgs.length - 1 && isNext)); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
|
<style scoped lang="less"> |
|
|
|
@ -469,14 +343,10 @@ html { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
background: black; |
|
|
|
background: black; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
//height: 100%; |
|
|
|
height: 100%; |
|
|
|
height: calc(100vh - 50rem); |
|
|
|
|
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
color: white; |
|
|
|
color: white; |
|
|
|
font-size: 14rem; |
|
|
|
font-size: 14rem; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.img-slide-wrapper { |
|
|
|
.img-slide-wrapper { |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -498,30 +368,15 @@ html { |
|
|
|
|
|
|
|
|
|
|
|
img { |
|
|
|
img { |
|
|
|
transform-origin: 0 0; |
|
|
|
transform-origin: 0 0; |
|
|
|
width: 100vw; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
|
|
|
|
width: 100vw; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.base-slide-item { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
|
|
|
width: 100vw; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.progress-bar { |
|
|
|
.progress-bar { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
width: 100vw; |
|
|
|
width: 100%; |
|
|
|
bottom: 0; |
|
|
|
bottom: 0; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
|
hhh
3 years ago