save
This commit is contained in:
hhh
parent
09273e9a53
commit
3cc830560d
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div id="SlideImgs">
|
||||
<div class="img-slide-wrapper" ref="wap">
|
||||
<div class="img-slide-wrapper">
|
||||
<div class="img-slide-list"
|
||||
ref="list"
|
||||
@touchstart="touchstart"
|
||||
@touchmove="touchmove"
|
||||
@touchend="touchend">
|
||||
<div class="img-slide-item" v-for="img in modelValue.imgs">
|
||||
ref="wrapperEl"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd">
|
||||
<div class="img-slide-item" v-for="img in props.modelValue.imgs">
|
||||
<img :ref="setItemRef" :src="img">
|
||||
</div>
|
||||
</div>
|
||||
@ -20,11 +20,20 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="jsx">
|
||||
import enums from "../../utils/enums";
|
||||
import globalMethods from '../../utils'
|
||||
import Utils from '../../utils'
|
||||
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([
|
||||
0, 0, 0, 0,
|
||||
@ -38,426 +47,291 @@ let ov = new Float32Array([
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1,
|
||||
]);
|
||||
let original = cloneDeep(ov)
|
||||
const rectMap = new Map()
|
||||
export default {
|
||||
name: "SlideImgs",
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
type: 'imgs',
|
||||
imgs: [
|
||||
new URL('../../assets/img/poster/0.jpg', import.meta.url).href,
|
||||
new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
|
||||
new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
|
||||
new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
|
||||
],
|
||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||
video: 'http://douyin.ttentau.top/0.mp4',
|
||||
"video_data_size": 26829508,
|
||||
"duration": 427780,
|
||||
"desc": "我不管我们宿舍第一好看",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 10480000,
|
||||
"comment_count": 79000,
|
||||
"download_count": 6,
|
||||
"play_count": 0,
|
||||
"share_count": 119000,
|
||||
"forward_count": 0,
|
||||
"collect_count": 3,
|
||||
"sort": 195,
|
||||
"is_top": 0,
|
||||
"city": "北京",
|
||||
address: '中央戏剧学院',
|
||||
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
|
||||
"create_time": "1630423555",
|
||||
"creator_id": "93864497380",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "敬礼变装",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "宿舍",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": {
|
||||
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
|
||||
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
|
||||
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
|
||||
"title": "@穷电影创作的原声-小高快起来跳舞",
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
type: 'imgs',
|
||||
imgs: [
|
||||
new URL('../../assets/img/poster/0.jpg', import.meta.url).href,
|
||||
new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
|
||||
new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
|
||||
new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
|
||||
],
|
||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||
video: 'http://douyin.ttentau.top/0.mp4',
|
||||
"video_data_size": 26829508,
|
||||
"duration": 427780,
|
||||
"desc": "我不管我们宿舍第一好看",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 10480000,
|
||||
"comment_count": 79000,
|
||||
"download_count": 6,
|
||||
"play_count": 0,
|
||||
"share_count": 119000,
|
||||
"forward_count": 0,
|
||||
"collect_count": 3,
|
||||
"sort": 195,
|
||||
"is_top": 0,
|
||||
"city": "北京",
|
||||
address: '中央戏剧学院',
|
||||
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
|
||||
"create_time": "1630423555",
|
||||
"creator_id": "93864497380",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "敬礼变装",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
"author": {
|
||||
"id": "1",
|
||||
"unique_id_modify_time": "1630393144",
|
||||
"unique_id": "10040050",
|
||||
"favoriting_count": 143,
|
||||
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
|
||||
school: {
|
||||
name: '中央戏剧学院',
|
||||
department: null,
|
||||
joinTime: null,
|
||||
education: null,
|
||||
displayType: enums.DISPLAY_TYPE.ALL,
|
||||
},
|
||||
"city": "",
|
||||
"province": '北京',
|
||||
"country": "",
|
||||
"location": "",
|
||||
"birthday": "2002-01-01",
|
||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
|
||||
"following_count": 66,
|
||||
"follower_count": 235000,
|
||||
"aweme_count": 1796000,
|
||||
"nickname": "我是小睿耶",
|
||||
certification: '',
|
||||
"phone": "",
|
||||
"sex": "",
|
||||
"last_login_time": "1630423555",
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "宿舍",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1,
|
||||
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
|
||||
"is_private": 0
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": {
|
||||
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
|
||||
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
|
||||
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
|
||||
"title": "@穷电影创作的原声-小高快起来跳舞",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
"author": {
|
||||
"id": "1",
|
||||
"unique_id_modify_time": "1630393144",
|
||||
"unique_id": "10040050",
|
||||
"favoriting_count": 143,
|
||||
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
|
||||
school: {
|
||||
name: '中央戏剧学院',
|
||||
department: null,
|
||||
joinTime: null,
|
||||
education: null,
|
||||
displayType: enums.DISPLAY_TYPE.ALL,
|
||||
},
|
||||
"city": "",
|
||||
"province": '北京',
|
||||
"country": "",
|
||||
"location": "",
|
||||
"birthday": "2002-01-01",
|
||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
|
||||
"following_count": 66,
|
||||
"follower_count": 235000,
|
||||
"aweme_count": 1796000,
|
||||
"nickname": "我是小睿耶",
|
||||
certification: '',
|
||||
"phone": "",
|
||||
"sex": "",
|
||||
"last_login_time": "1630423555",
|
||||
"create_time": "1630423555",
|
||||
"status": 1,
|
||||
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
|
||||
"is_private": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
const judgeValue = 20
|
||||
const wrapperEl = ref(null)
|
||||
|
||||
const state = reactive({
|
||||
name: 'SlideHorizontal',
|
||||
localIndex: 0,
|
||||
needCheck: true,
|
||||
isTwo: true,
|
||||
next: false,
|
||||
wrapper: {width: 0, height: 0, childrenLength: 0},
|
||||
last: {
|
||||
point1: {x: 0, y: 0},
|
||||
point2: {x: 0, y: 0},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
itemRefs: [],
|
||||
baseActiveIndex: 0,
|
||||
progress: 0,
|
||||
cycleFn: null,
|
||||
state: 'play',//stop,custom
|
||||
start: {
|
||||
x: 0, y: 0,
|
||||
point1: {x: 0, y: 0},
|
||||
point2: {x: 0, y: 0},
|
||||
center: {x: 0, y: 0},
|
||||
time: 0
|
||||
},
|
||||
move: {x: 0, y: 0},
|
||||
itemRefs: [],
|
||||
status: 'play',//stop,custom
|
||||
progress: 0,
|
||||
cycleFn: null,
|
||||
})
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
|
||||
|
||||
startX: 0,
|
||||
startY: 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: {
|
||||
ratio: 1,
|
||||
point1: {x: 0, y: 0},
|
||||
point2: {x: 0, y: 0},
|
||||
},
|
||||
start: {
|
||||
point1: {x: 0, y: 0},
|
||||
point2: {x: 0, y: 0},
|
||||
state.cycleFn = () => {
|
||||
if (state.status !== 'play') return cancelAnimationFrame(state.cycleFn)
|
||||
if (state.progress < props.modelValue.imgs.length * 100) {
|
||||
state.progress += .4
|
||||
state.localIndex = parseInt(state.progress / 100)
|
||||
if (wrapperEl.value) {
|
||||
Utils.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
|
||||
Utils.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state)}px, 0px, 0px)`)
|
||||
}
|
||||
} else {
|
||||
state.progress = 0
|
||||
// cancelAnimationFrame(this.cycleFn)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.width = document.body.clientWidth
|
||||
},
|
||||
watch: {
|
||||
state(newVal, oldVal) {
|
||||
return
|
||||
console.log('newVal', newVal)
|
||||
if (newVal === 'play') requestAnimationFrame(this.cycleFn)
|
||||
if (newVal === 'stop') cancelAnimationFrame(this.cycleFn)
|
||||
if (newVal === 'custom') cancelAnimationFrame(this.cycleFn)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.cycleFn = () => {
|
||||
if (this.state !== 'play') return cancelAnimationFrame(this.cycleFn)
|
||||
if (this.progress < this.modelValue.imgs.length * 100) {
|
||||
this.progress += .4
|
||||
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 {
|
||||
this.progress = 0
|
||||
// cancelAnimationFrame(this.cycleFn)
|
||||
}
|
||||
requestAnimationFrame(this.cycleFn)
|
||||
}
|
||||
return
|
||||
// requestAnimationFrame(this.cycleFn)
|
||||
requestAnimationFrame(state.cycleFn)
|
||||
}
|
||||
requestAnimationFrame(state.cycleFn)
|
||||
})
|
||||
|
||||
let x = 0
|
||||
let y = 0
|
||||
let scale = 1
|
||||
function touchStart(e) {
|
||||
console.log('start', e.touches.length)
|
||||
// if (s.state !== 'custom') {
|
||||
// this.state = 'stop'
|
||||
// }
|
||||
if (e.touches.length === 1) {
|
||||
state.isTwo = false
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
} else {
|
||||
if (state.isTwo) return
|
||||
state.isTwo = true
|
||||
state.itemRefs[state.localIndex].style['transition-duration'] = '0ms';
|
||||
state.last.point1 = state.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
|
||||
state.last.point2 = state.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
|
||||
state.start.center = Utils.getCenter(state.start.point1, state.start.point2)
|
||||
}
|
||||
}
|
||||
|
||||
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';
|
||||
function touchMove(e) {
|
||||
// console.log('move', e.touches.length)
|
||||
if (state.isTwo && e.touches.length === 1) {
|
||||
state.status = 'pause'
|
||||
Utils.$stopPropagation(e)
|
||||
|
||||
// console.log('单手移动',)
|
||||
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||
let movementX = current.x - state.last.point1.x
|
||||
let movementY = current.y - state.last.point1.y
|
||||
// console.log(movementX, movementY)
|
||||
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);
|
||||
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
|
||||
state.last.point1 = current
|
||||
} else {
|
||||
if (e.touches.length === 1) {
|
||||
state.isTwo = false
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => {
|
||||
state.status = 'pause'
|
||||
}, SlideType.HORIZONTAL)
|
||||
} else {
|
||||
state.isTwo = true
|
||||
Utils.$stopPropagation(e)
|
||||
state.status = 'pause'
|
||||
|
||||
let {clientX, clientY, deltaY} = e;
|
||||
let rect = {x: 0, y: 0}
|
||||
if (tt.has(this.index)) {
|
||||
rect = tt.get(this.index)
|
||||
if (rectMap.has(state.localIndex)) {
|
||||
rect = rectMap.get(state.localIndex)
|
||||
} else {
|
||||
rect = this.itemRefs[this.index].getBoundingClientRect()
|
||||
tt.set(this.index, rect)
|
||||
//getBoundingClientRect在手机上获取不到值
|
||||
let offset = $(state.itemRefs[state.localIndex]).offset()
|
||||
rect = {x: offset.left, y: offset.top}
|
||||
rectMap.set(state.localIndex, 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);
|
||||
|
||||
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 currentRatio = Utils.getDistance(current1, current2) / Utils.getDistance(state.start.point1, state.start.point2);
|
||||
|
||||
let center = Utils.getCenter(current1, current2)
|
||||
|
||||
center.x -= rect.x
|
||||
center.y -= rect.y
|
||||
//用最新的放大倍数ratio除以之前的放大ov[0]倍数，算出本次要累加放大的倍数
|
||||
let zoom = currentRatio / ov[0]
|
||||
const x = center.x * (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,]);
|
||||
//如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
|
||||
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算
|
||||
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()})`;
|
||||
|
||||
let movementRatio = currentRatio - ov[0]
|
||||
//如果本次比例和上次的不超过0.02。那么判定为平移
|
||||
if (Math.abs(movementRatio) <= 0.02) {
|
||||
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 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);
|
||||
}
|
||||
});
|
||||
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)
|
||||
if (this.state !== 'custom') {
|
||||
this.state = 'stop'
|
||||
}
|
||||
if (e.touches.length === 1) {
|
||||
this.isTwo = false
|
||||
globalMethods.$setCss(this.$refs.list, 'transition-duration', `0ms`)
|
||||
this.startX = e.touches[0].pageX
|
||||
this.startY = e.touches[0].pageY
|
||||
this.startTime = Date.now()
|
||||
} else {
|
||||
if (this.isTwo) return
|
||||
this.isTwo = true
|
||||
this.itemRefs[this.index].style['transition-duration'] = '0ms';
|
||||
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
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('单手移动',)
|
||||
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||
let movementX = current.x - this.last.point1.x
|
||||
let movementY = current.y - this.last.point1.y
|
||||
console.log(movementX, movementY)
|
||||
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);
|
||||
this.itemRefs[this.index].style.transform = `matrix3d(${ov1.toString()})`;
|
||||
// this.last.point1 = current
|
||||
} else {
|
||||
if (e.touches.length === 1) {
|
||||
this.isTwo = false
|
||||
|
||||
this.moveX = e.touches[0].pageX - this.startX
|
||||
this.moveY = e.touches[0].pageY - this.startY
|
||||
|
||||
this.isDrawRight = this.moveX < 0
|
||||
this.isDrawDown = this.moveY < 0
|
||||
|
||||
if (this.index === 0 && !this.isDrawRight) return
|
||||
if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
|
||||
|
||||
globalMethods.$setCss(this.$refs.list, 'transform',
|
||||
`translate3d(${-this.getWidth(this.index) +
|
||||
this.moveX}px, 0px, 0px)`)
|
||||
} else {
|
||||
this.isTwo = true
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
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 ratio = this.getDistance(current1, current2) / this.getDistance(this.point1, this.point2);
|
||||
|
||||
let rect = {x: 0, y: 0}
|
||||
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.y -= rect.y
|
||||
let zoom = ratio
|
||||
const x = center.x * (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,]);
|
||||
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov
|
||||
//但这里zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
|
||||
ov = mat4.multiply(out, t, original);
|
||||
|
||||
let movementX = current1.x - this.last.point1.x
|
||||
let movementY = current1.y - this.last.point1.y
|
||||
let movement2X = current2.x - this.last.point2.x
|
||||
let movement2Y = current2.y - this.last.point2.y
|
||||
|
||||
let minX = Math.min(movementX, movement2X)
|
||||
let minY = Math.min(movementY, movement2Y)
|
||||
|
||||
console.log('minX', minX, 'minY', minY)
|
||||
|
||||
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
|
||||
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}
|
||||
// }
|
||||
|
||||
} else {
|
||||
if (this.index === 0 && !this.isDrawRight) return
|
||||
if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
|
||||
|
||||
let canSlide = this.width / 5 < Math.abs(this.moveX);
|
||||
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 {
|
||||
if (this.state !== 'custom') {
|
||||
this.state = 'play'
|
||||
}
|
||||
}
|
||||
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) {
|
||||
this.itemRefs.push(el)
|
||||
}
|
||||
},
|
||||
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) {
|
||||
if (this.progress >= (index + 1) * 100) return {width: '100%'}
|
||||
return {width: `${this.progress - index * 100 < 0 ? 0 : this.progress - index * 100}%`}
|
||||
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
|
||||
state.last.point1 = current1
|
||||
state.last.point2 = current2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
if (state.isTwo) {
|
||||
Utils.$stopPropagation(e)
|
||||
state.itemRefs[state.localIndex].style['transition-duration'] = '300ms';
|
||||
state.itemRefs[state.localIndex].style.transform = `matrix3d(${ov.toString()})`;
|
||||
|
||||
} else {
|
||||
slideTouchEnd(e, state, canNext,
|
||||
() => {
|
||||
state.status = 'custom'
|
||||
state.progress = (state.localIndex + 1) * 100
|
||||
},
|
||||
() => {
|
||||
if (state.status !== 'custom') {
|
||||
state.status = 'play'
|
||||
requestAnimationFrame(state.cycleFn)
|
||||
}
|
||||
}
|
||||
)
|
||||
slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, null)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<style scoped lang="less">
|
||||
@ -469,14 +343,10 @@ html {
|
||||
position: relative;
|
||||
background: black;
|
||||
width: 100%;
|
||||
//height: 100%;
|
||||
height: calc(100vh - 50rem);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.img-slide-wrapper {
|
||||
height: 100%;
|
||||
@ -498,30 +368,15 @@ html {
|
||||
|
||||
img {
|
||||
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 {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<div class="img-slide-wrapper">
|
||||
<div class="img-slide-list"
|
||||
ref="list"
|
||||
@touchstart="start"
|
||||
@touchmove="move"
|
||||
@touchend="end">
|
||||
@touchstart="touchstart"
|
||||
@touchmove="touchmove"
|
||||
@touchend="touchend">
|
||||
<div class="img-slide-item" v-for="img in modelValue.imgs">
|
||||
<img :ref="setItemRef" :src="img">
|
||||
</div>
|
||||
@ -22,8 +22,25 @@
|
||||
|
||||
<script>
|
||||
import enums from "../../utils/enums";
|
||||
import globalMethods from '../../utils'
|
||||
//TODO 放大功能待完善
|
||||
import Utils from '../../utils'
|
||||
import GM from '../../utils'
|
||||
import {mat4} from 'gl-matrix'
|
||||
import {cloneDeep} from "lodash";
|
||||
|
||||
let out = new Float32Array([
|
||||
0, 0, 0, 0,
|
||||
0, 0, 0, 0,
|
||||
0, 0, 0, 0,
|
||||
0, 0, 0, 0
|
||||
])
|
||||
let ov = new Float32Array([
|
||||
1, 0, 0, 0,
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1,
|
||||
]);
|
||||
let original = cloneDeep(ov)
|
||||
const rectMap = new Map()
|
||||
export default {
|
||||
name: "SlideImgs",
|
||||
components: {},
|
||||
@ -134,42 +151,27 @@ export default {
|
||||
cycleFn: null,
|
||||
state: 'play',//stop,custom
|
||||
|
||||
startX: 0,
|
||||
startY: 0,
|
||||
|
||||
moveX: 0,
|
||||
moveY: 0,
|
||||
width: document.body.clientWidth,
|
||||
startTime: 0,
|
||||
index: 0,
|
||||
isDrawRight: false,
|
||||
isDrawDown: false,
|
||||
isNext: false,
|
||||
isTwo: false,
|
||||
store: {
|
||||
scale: 1
|
||||
last: {
|
||||
ratio: 1,
|
||||
point1: {x: 0, y: 0},
|
||||
point2: {x: 0, y: 0},
|
||||
},
|
||||
result: {
|
||||
width: 414,
|
||||
height: 737
|
||||
start: {
|
||||
point1: {x: 0, y: 0},
|
||||
point2: {x: 0, y: 0},
|
||||
center: {x: 0, y: 0},
|
||||
time: 0
|
||||
},
|
||||
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},
|
||||
a: {},
|
||||
b: {},
|
||||
move: {x: 0, y: 0},
|
||||
wrapper: {
|
||||
width: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.width = document.body.clientWidth
|
||||
},
|
||||
watch: {
|
||||
state(newVal, oldVal) {
|
||||
@ -187,9 +189,8 @@ export default {
|
||||
this.progress += .4
|
||||
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)`)
|
||||
Utils.$setCss(this.$refs.list, 'transition-duration', `300ms`)
|
||||
Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance()}px, 0px, 0px)`)
|
||||
}
|
||||
} else {
|
||||
this.progress = 0
|
||||
@ -197,6 +198,8 @@ export default {
|
||||
}
|
||||
requestAnimationFrame(this.cycleFn)
|
||||
}
|
||||
this.wrapper.width = GM.$getCss(this.$refs.list, 'width')
|
||||
return
|
||||
// requestAnimationFrame(this.cycleFn)
|
||||
},
|
||||
methods: {
|
||||
@ -205,137 +208,164 @@ export default {
|
||||
const y = (a.y + b.y) / 2;
|
||||
return {x, y}
|
||||
},
|
||||
start(e) {
|
||||
console.log('start')
|
||||
// 获取坐标之间的举例
|
||||
getDistance(start, stop) {
|
||||
return Math.hypot(stop.x - start.x, stop.y - start.y);
|
||||
},
|
||||
touchstart(e) {
|
||||
console.log('start', e.touches.length)
|
||||
if (this.state !== 'custom') {
|
||||
this.state = 'stop'
|
||||
}
|
||||
if (e.touches && e.touches.length === 1) {
|
||||
if (e.touches.length === 1) {
|
||||
this.isTwo = false
|
||||
globalMethods.$setCss(this.$refs.list, 'transition-duration', `0ms`)
|
||||
this.startX = e.touches[0].pageX
|
||||
this.startY = e.touches[0].pageY
|
||||
this.startTime = Date.now()
|
||||
Utils.$setCss(this.$refs.list, 'transition-duration', `0ms`)
|
||||
this.start = {
|
||||
point1: {
|
||||
x: e.touches[0].pageX,
|
||||
y: e.touches[0].pageY,
|
||||
},
|
||||
time: Date.now()
|
||||
}
|
||||
} else {
|
||||
if (this.isTwo) return
|
||||
|
||||
this.isTwo = true
|
||||
this.itemRefs[this.index].style['transition-duration'] = '0ms';
|
||||
|
||||
let events = e.touches[0];
|
||||
let events2 = e.touches[1];
|
||||
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
this.lastPoint1 = this.point1 = {x: events.pageX, y: events.pageY};
|
||||
this.lastPoint2 = this.point2 = {x: events2.pageX, y: events2.pageY};
|
||||
|
||||
this.lastCenter = this.getCenter(this.lastPoint1, this.lastPoint2)
|
||||
this.last.point1 = this.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
|
||||
this.last.point2 = this.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
|
||||
this.start.center = this.getCenter(this.start.point1, this.start.point2)
|
||||
}
|
||||
},
|
||||
move(e) {
|
||||
if (e.touches && e.touches.length === 1) {
|
||||
this.isTwo = false
|
||||
touchmove(e) {
|
||||
console.log('move', e.touches.length)
|
||||
if (this.isTwo && e.touches.length === 1) {
|
||||
Utils.$stopPropagation(e)
|
||||
|
||||
this.moveX = e.touches[0].pageX - this.startX
|
||||
this.moveY = e.touches[0].pageY - this.startY
|
||||
|
||||
this.isDrawRight = this.moveX < 0
|
||||
this.isDrawDown = this.moveY < 0
|
||||
|
||||
if (this.index === 0 && !this.isDrawRight) return
|
||||
if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
|
||||
|
||||
globalMethods.$setCss(this.$refs.list, 'transform',
|
||||
`translate3d(${-this.getWidth(this.index) +
|
||||
this.moveX}px, 0px, 0px)`)
|
||||
// console.log('单手移动',)
|
||||
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||
let movementX = current.x - this.last.point1.x
|
||||
let movementY = current.y - this.last.point1.y
|
||||
console.log(movementX, movementY)
|
||||
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()})`;
|
||||
this.last.point1 = current
|
||||
} else {
|
||||
this.isTwo = true
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
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 getDistance = function (start, stop) {
|
||||
return Math.hypot(stop.x - start.x, stop.y - start.y);
|
||||
};
|
||||
|
||||
// 双指缩放比例计算
|
||||
let ratio = getDistance(current1, current2) / getDistance(this.lastPoint1, this.lastPoint2);
|
||||
|
||||
|
||||
// 计算当前双指中心点坐标
|
||||
let center = this.getCenter(current1, current2)
|
||||
console.log('center', center)
|
||||
|
||||
// 计算图片中心偏移量，默认transform-origin: 50% 50%
|
||||
// 如果transform-origin: 30% 40%，那origin.x = (ratio - 1) * result.width * 0.3
|
||||
// origin.y = (ratio - 1) * result.height * 0.4
|
||||
// 如果通过修改宽高或使用transform缩放，但将transform-origin设置为左上角时。
|
||||
// 可以不用计算origin，因为(ratio - 1) * result.width * 0 = 0
|
||||
const origin = {
|
||||
x: (ratio - 1) * this.result.width * 0.5,
|
||||
y: (ratio - 1) * this.result.height * 0.5
|
||||
};
|
||||
// 计算偏移量，认真思考一下为什么要这样计算(带入特定的值计算一下)
|
||||
this.x -= (ratio - 1) * (center.x - this.x) - origin.x - (center.x - this.lastCenter.x);
|
||||
this.y -= (ratio - 1) * (center.y - this.y) - origin.y - (center.y - this.lastCenter.y);
|
||||
|
||||
// console.log('this.x', this.x)
|
||||
// console.log('this.y', this.y)
|
||||
|
||||
// 图像应用缩放效果
|
||||
this.itemRefs[this.index].style.transform =
|
||||
`translate3d(${this.x}px,${this.y}px,0) scale(${this.store.scale * ratio})`;
|
||||
|
||||
this.lastCenter = {x: center.x, y: center.y};
|
||||
this.lastPoint1 = {x: current1.x, y: current1.y};
|
||||
this.lastPoint2 = {x: current2.x, y: current2.y};
|
||||
}
|
||||
},
|
||||
end(e) {
|
||||
console.log('end',e.touches)
|
||||
if (this.isTwo) {
|
||||
this.store.scale = 1
|
||||
this.itemRefs[this.index].style['transition-duration'] = '300ms';
|
||||
this.itemRefs[this.index].style.transform = `translate3d(0,0,0) scale(1)`;
|
||||
if (this.state !== 'custom') {
|
||||
this.state = 'play'
|
||||
}
|
||||
if (e.touches.length){
|
||||
this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||
}
|
||||
|
||||
} else {
|
||||
if (this.index === 0 && !this.isDrawRight) return
|
||||
if (this.index === this.modelValue.imgs.length - 1 && this.isDrawRight) return
|
||||
|
||||
let canSlide = this.width / 5 < Math.abs(this.moveX);
|
||||
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
|
||||
if (e.touches.length === 1) {
|
||||
this.isTwo = false
|
||||
this.move.x = e.touches[0].pageX - this.start.point1.x
|
||||
this.move.y = e.touches[0].pageY - this.start.point1.y
|
||||
this.isNext = this.move.x < 0
|
||||
if (!this.canNext(this.isNext)) return
|
||||
Utils.$stopPropagation(e)
|
||||
Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance() + this.move.x}px, 0px, 0px)`)
|
||||
} else {
|
||||
if (this.state !== 'custom') {
|
||||
this.state = 'play'
|
||||
Utils.$stopPropagation(e)
|
||||
this.isTwo = true
|
||||
|
||||
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 ratio = this.getDistance(current1, current2) / this.getDistance(this.start.point1, this.start.point2);
|
||||
|
||||
let rect = {x: 0, y: 0}
|
||||
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 = this.getCenter(current1, current2)
|
||||
center.x -= rect.x
|
||||
center.y -= rect.y
|
||||
//用最新的放大倍数ratio除以之前的放大ov[0]倍数，算出本次要累加放大的倍数
|
||||
let zoom = ratio / ov[0]
|
||||
const x = center.x * (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,]);
|
||||
//如果zoom是每次都是最后放大倍数，第三个参数用原值（即，矩阵x乘时，都是乘以单位矩阵）
|
||||
//如果zoom是累加放大（比如每次都是0.15），第三个参数用ov。这里还是采用累加计算
|
||||
ov = mat4.multiply(out, t, ov);
|
||||
|
||||
let dRatio = this.last.ratio - ratio
|
||||
//如果本次比例和上次的不超过0.02。那么判定为平移
|
||||
if (Math.abs(dRatio) <= 0.02) {
|
||||
let movementX = current1.x - this.last.point1.x
|
||||
let movementY = current1.y - this.last.point1.y
|
||||
let movement2X = current2.x - this.last.point2.x
|
||||
let movement2Y = current2.y - this.last.point2.y
|
||||
|
||||
let minX = Math.min(movementX, movement2X)
|
||||
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);
|
||||
}
|
||||
|
||||
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
|
||||
this.last.point1 = current1
|
||||
this.last.point2 = current2
|
||||
this.last.ratio = ratio
|
||||
}
|
||||
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
|
||||
touchend(e) {
|
||||
console.log('end', e.touches.length, this.isTwo)
|
||||
if (this.isTwo && e.touches.length === 1) {
|
||||
Utils.$stopPropagation(e)
|
||||
|
||||
//双指缩放，但只松开了一只手
|
||||
this.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
|
||||
} else {
|
||||
if (this.isTwo) {
|
||||
Utils.$stopPropagation(e)
|
||||
|
||||
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}
|
||||
// }
|
||||
|
||||
} else {
|
||||
if (!this.canNext(this.isNext)) return
|
||||
Utils.$stopPropagation(e)
|
||||
|
||||
let canSlide = this.wrapper.width / 5 < Math.abs(this.move.x);
|
||||
if (Date.now() - this.start.time < 40) canSlide = false
|
||||
|
||||
if (canSlide) {
|
||||
if (this.isNext) {
|
||||
this.index += 1
|
||||
} else {
|
||||
this.index -= 1
|
||||
}
|
||||
this.state = 'custom'
|
||||
this.progress = (this.index + 1) * 100
|
||||
} else {
|
||||
if (this.state !== 'custom') {
|
||||
this.state = 'play'
|
||||
}
|
||||
}
|
||||
Utils.$setCss(this.$refs.list, 'transition-duration', `300ms`)
|
||||
Utils.$setCss(this.$refs.list, 'transform', `translate3d(${this.getSlideDistance()}px, 0px, 0px)`)
|
||||
}
|
||||
}
|
||||
},
|
||||
canNext(isNext) {
|
||||
return !((this.index === 0 && !isNext) || (this.index === this.modelValue.imgs.length - 1 && isNext));
|
||||
},
|
||||
getSlideDistance() {
|
||||
return -this.index * this.wrapper.width
|
||||
},
|
||||
setItemRef(el) {
|
||||
if (el) {
|
||||
@ -374,76 +404,60 @@ html {
|
||||
position: relative;
|
||||
background: black;
|
||||
width: 100%;
|
||||
//height: 100%;
|
||||
height: calc(100vh - 5rem);
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14rem;
|
||||
|
||||
.img-slide-wrapper {
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.img-slide-list {
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.img-slide-item {
|
||||
min-width: 100vw;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
//transform-origin: left top;
|
||||
width: 100vw;
|
||||
//position: absolute;
|
||||
//height: 100%;
|
||||
transform-origin: 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100vw;
|
||||
|
||||
.base-slide-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 0 .5rem;
|
||||
padding: 0 5rem;
|
||||
justify-content: space-between;
|
||||
|
||||
.bar {
|
||||
border-radius: 1rem;
|
||||
border-radius: 10rem;
|
||||
flex: 1;
|
||||
margin: 0 .2rem;
|
||||
height: .2rem;
|
||||
margin: 0 2rem;
|
||||
height: 2rem;
|
||||
background: gray;
|
||||
position: relative;
|
||||
|
||||
.progress {
|
||||
border-radius: 1rem;
|
||||
border-radius: 10rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: .2rem;
|
||||
height: 2rem;
|
||||
background: white;
|
||||
//width: 100%;
|
||||
//animation: start 3s linear;
|
||||
|
||||
@ -47,7 +47,7 @@ function touchStart(e) {
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, SlideType.HORIZONTAL)
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.HORIZONTAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="slide-item">
|
||||
<div class="slide-item2">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@ -8,7 +8,7 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.slide-item {
|
||||
.slide-item2 {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref,watch} from "vue";
|
||||
import {onMounted, reactive, ref, watch} from "vue";
|
||||
import GM from '../../utils'
|
||||
import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
|
||||
import {SlideType} from "../../utils/const_var";
|
||||
@ -46,13 +46,11 @@ function touchStart(e) {
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, SlideType.VERTICAL)
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.VERTICAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
slideTouchEnd(e, state, canNext, () => {
|
||||
|
||||
}, SlideType.VERTICAL)
|
||||
slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
|
||||
|
||||
@ -124,13 +124,13 @@ function touchStart(e) {
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, SlideType.VERTICAL)
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.VERTICAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
slideTouchEnd(e, state, canNext, () => {
|
||||
|
||||
}, SlideType.VERTICAL)
|
||||
},null, SlideType.VERTICAL)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
|
||||
|
||||
@ -36,15 +36,16 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
|
||||
return state.next
|
||||
}
|
||||
|
||||
export function slideTouchMove(e, el, state, judgeValue, cb, type = SlideType.HORIZONTAL) {
|
||||
export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL) {
|
||||
state.move.x = e.touches[0].pageX - state.start.x
|
||||
state.move.y = e.touches[0].pageY - state.start.y
|
||||
|
||||
let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
|
||||
|
||||
if (!cb?.(isNext)) return
|
||||
if (!canNextCb?.(isNext)) return
|
||||
|
||||
if (canSlide(state, judgeValue, type)) {
|
||||
nextCb?.()
|
||||
bus.emit(state.name + '-moveX', state.move.x)
|
||||
Utils.$stopPropagation(e)
|
||||
let t = getSlideDistance(state, type) + (isNext ? judgeValue : -judgeValue)
|
||||
@ -55,11 +56,12 @@ export function slideTouchMove(e, el, state, judgeValue, cb, type = SlideType.HO
|
||||
} else {
|
||||
dx2 = t + state.move.y
|
||||
}
|
||||
Utils.$setCss(el, 'transition-duration', `0ms`)
|
||||
Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
|
||||
}
|
||||
}
|
||||
|
||||
export function slideTouchEnd(e, state, canNextCb, nextCb, type = SlideType.HORIZONTAL) {
|
||||
export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = SlideType.HORIZONTAL) {
|
||||
let isHorizontal = type === SlideType.HORIZONTAL;
|
||||
let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
|
||||
|
||||
@ -79,6 +81,8 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, type = SlideType.HORI
|
||||
state.localIndex--
|
||||
}
|
||||
nextCb?.()
|
||||
} else {
|
||||
notNextCb?.()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -97,7 +101,7 @@ export function slideReset(el, state, type, emit) {
|
||||
state.start.x = state.start.y = state.start.time = state.move.x = state.move.y = 0
|
||||
state.next = false
|
||||
state.needCheck = true
|
||||
emit('update:index', state.localIndex)
|
||||
emit?.('update:index', state.localIndex)
|
||||
bus.emit(state.name + '-end', state.localIndex)
|
||||
}
|
||||
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<div class="test-slide-wrapper">
|
||||
<H v-model:index="state.baseIndex">
|
||||
<SlideItem class="slide-item gray">
|
||||
<SlideItem class=" gray">
|
||||
<H class="h" v-model:index="state.navIndex">
|
||||
<SlideItem class="slide-item gray">
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">找红包</div>
|
||||
</SlideItem>
|
||||
<SlideItem class="slide-item gray">
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">热点</div>
|
||||
</SlideItem>
|
||||
<SlideItem class="slide-item gray">
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">社区</div>
|
||||
</SlideItem>
|
||||
<SlideItem class="slide-item gray">
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">关注</div>
|
||||
</SlideItem>
|
||||
<SlideItem class="slide-item gray">
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">商城</div>
|
||||
</SlideItem>
|
||||
<SlideItem class="slide-item">
|
||||
<SlideItem class="">
|
||||
<VInfinite
|
||||
v-model:index="state.index"
|
||||
:render="render"
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<Footer v-bind:init-tab="1"/>
|
||||
</SlideItem>
|
||||
<SlideItem class="slide-item gray">
|
||||
<SlideItem class=" gray">
|
||||
<div class="big" v-for="i in 100">主页</div>
|
||||
</SlideItem>
|
||||
</H>
|
||||
@ -63,10 +63,10 @@ const state = reactive({
|
||||
navIndex: 5,
|
||||
index: 0,
|
||||
recommendVideos: [
|
||||
{
|
||||
type: 'img',
|
||||
src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
},
|
||||
// {
|
||||
// type: 'img',
|
||||
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
// },
|
||||
{
|
||||
type: 'imgs',
|
||||
src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
@ -85,7 +85,7 @@ function render(item, itemIndex, play) {
|
||||
node = <SlideImgs/>
|
||||
}
|
||||
return node
|
||||
// return <SlideItem class="slide-item gray">{node}</SlideItem>
|
||||
// return <SlideItem class=" gray">{node}</SlideItem>
|
||||
}
|
||||
|
||||
// function render1(item, itemIndex, play) {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<!-- <TestSlide></TestSlide>-->
|
||||
<!-- <SlideUser></SlideUser>-->
|
||||
<SlideImgs></SlideImgs>
|
||||
<!-- <TestImg/>-->
|
||||
<!-- <slideHooks></slideHooks>-->
|
||||
<!-- <SlideImgs></SlideImgs>-->
|
||||
<!-- <TestImg/>-->
|
||||
<slideHooks></slideHooks>
|
||||
|
||||
<!-- <div class="body">-->
|
||||
<!-- <div class="wrapper">-->
|
||||
@ -46,7 +46,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
<style scoped lang="less">
|
||||
.body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -63,10 +63,4 @@ export default {
|
||||
background: black;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
transform-origin: 0 0;
|
||||
max-width: 1040px;
|
||||
max-height: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -353,7 +353,7 @@ export default {
|
||||
}
|
||||
return str
|
||||
},
|
||||
$randomNum(minNum, maxNum) {
|
||||
randomNum(minNum, maxNum) {
|
||||
switch (arguments.length) {
|
||||
case 1:
|
||||
return parseInt(Math.random() * minNum + 1, 10);
|
||||
@ -363,4 +363,13 @@ export default {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
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);
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user