撤销 ce07f4a(lightbox 手机适配 + 正文图预览委托):真机上反复出问题(撑屏/缩放错乱),全部回退到原有简单预览;仅保留 lb-open 隐藏吸顶栏的亮带修复
This commit is contained in:
@@ -3,59 +3,34 @@ import { onBeforeUnmount, watch } from 'vue'
|
||||
import { lightboxState as st, closeLightbox, stepLightbox } from '../lightbox'
|
||||
|
||||
// 图片预览层:App.vue 全局挂一次。铺满全屏的暗底 + 居中大图,
|
||||
// 多图时左右箭头 / 方向键 / 手机滑动切换,角标显示第几张;Esc / 点空白收起。
|
||||
// 多图时左右箭头 / 方向键切换,角标显示第几张;Esc / 点空白收起。
|
||||
|
||||
function onKey(e) {
|
||||
if (e.key === 'Escape') closeLightbox()
|
||||
if (e.key === 'ArrowLeft') stepLightbox(-1)
|
||||
if (e.key === 'ArrowRight') stepLightbox(1)
|
||||
}
|
||||
|
||||
// 打开时锁住背景滚动(手机上尤其明显:否则手指滑动会带着页面一起动)
|
||||
let prevOverflow = ''
|
||||
watch(
|
||||
() => st.open,
|
||||
(v) => {
|
||||
if (v) {
|
||||
window.addEventListener('keydown', onKey)
|
||||
prevOverflow = document.body.style.overflowY
|
||||
// 只锁纵向:整个 overflow 改 hidden 会覆盖样式表的 overflow-x: clip,
|
||||
// 横向从「裁剪」变「可滚动容器」,手机上整页能被拖宽(真实事故)
|
||||
document.body.style.overflowY = 'hidden'
|
||||
// 吸顶栏带 backdrop-filter,真机上其合成层会盖在遮罩之上
|
||||
// (遮罩 z-index 更高也拦不住)——开预览时整个藏掉
|
||||
document.body.classList.add('lb-open')
|
||||
} else {
|
||||
window.removeEventListener('keydown', onKey)
|
||||
document.body.style.overflowY = prevOverflow
|
||||
document.body.classList.remove('lb-open')
|
||||
}
|
||||
}
|
||||
)
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKey)
|
||||
document.body.style.overflowY = prevOverflow
|
||||
document.body.classList.remove('lb-open')
|
||||
})
|
||||
|
||||
// 手机滑动翻页:横向位移超 44px 且大于纵向位移才算一次滑动
|
||||
let touchX = 0
|
||||
let touchY = 0
|
||||
function onTouchStart(e) {
|
||||
touchX = e.touches[0].clientX
|
||||
touchY = e.touches[0].clientY
|
||||
}
|
||||
function onTouchEnd(e) {
|
||||
const dx = e.changedTouches[0].clientX - touchX
|
||||
const dy = e.changedTouches[0].clientY - touchY
|
||||
if (Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy) * 1.4 && st.list.length > 1) {
|
||||
stepLightbox(dx < 0 ? 1 : -1)
|
||||
}
|
||||
}
|
||||
onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="lb">
|
||||
<div v-if="st.open" class="lb-overlay" @click="closeLightbox" @touchstart.passive="onTouchStart" @touchend.passive="onTouchEnd">
|
||||
<div v-if="st.open" class="lb-overlay" @click="closeLightbox">
|
||||
<img
|
||||
class="lb-img"
|
||||
:src="st.list[st.index]"
|
||||
@@ -156,43 +131,28 @@ function onTouchEnd(e) {
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.lb-overlay {
|
||||
/* 全面屏 URL 栏收展时 100vh 会偏大,dvh 跟随可视高度 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lb-img {
|
||||
max-width: 100vw;
|
||||
max-height: 74dvh;
|
||||
border-radius: 0;
|
||||
max-width: 96vw;
|
||||
max-height: 74vh;
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 22px;
|
||||
/* 悬浮在图片两侧半透明,可见但不抢戏 */
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.lb-nav.prev {
|
||||
left: calc(8px + env(safe-area-inset-left));
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.lb-nav.next {
|
||||
right: calc(8px + env(safe-area-inset-right));
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.lb-close {
|
||||
top: calc(10px + env(safe-area-inset-top));
|
||||
right: calc(10px + env(safe-area-inset-right));
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.lb-count {
|
||||
bottom: calc(14px + env(safe-area-inset-bottom));
|
||||
font-size: 12px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user