jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

修复bug

Browse Source
This commit is contained in:
liqian
2025-11-27 09:42:18 +08:00
parent 72f5d18545
commit 5db0b37db0
10 changed files with 546 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
app/index/view/mobile/topic_power_prodline/index.html
View File

@@ -486,6 +486,7 @@
); // passive: false 必须，否则 preventDefault 无效
const allVideos = document.querySelectorAll('.right-video');
let scrollTimer = null; // 防抖定时器
// 停止所有视频播放
function stopAllVideos() {
allVideos.forEach((video) => {
@@ -496,49 +497,56 @@
if (img) img.style.display = 'block';
});
}
// 处理视频/图片切换的核心逻辑（抽离为独立函数）
// 处理视频/图片切换的核心逻辑（抽离为独立函数）
function handleVideoActive() {
const productRights = document.querySelectorAll('.product-right');
let activeVideo = null;
// 找出当前在视口中的视频容器
productRights.forEach((rightContainer) => {
const img = rightContainer.querySelector('.right-img');
const video = rightContainer.querySelector('.right-video');
const videoSrc = video.src.trim();
if (!img || !video || !videoSrc) return;
// 滚动切换图片/视频（核心逻辑）
window.addEventListener('scroll', function () {
const productRights = document.querySelectorAll('.product-right');
let activeVideo = null;
// 找出当前在视口中的视频容器
productRights.forEach((rightContainer) => {
const img = rightContainer.querySelector('.right-img');
const video = rightContainer.querySelector('.right-video');
const videoSrc = video.src.trim()
if (!img || !video) return;
if(!videoSrc) return;
const rect = rightContainer.getBoundingClientRect();
// 视口判断：容器进入视口50%以上视为活跃
const isInView =
rect.top < window.innerHeight * 0.7 &&
rect.bottom > window.innerHeight * 0.3;
const rect = rightContainer.getBoundingClientRect();
// 视口判断：容器进入视口50%以上视为活跃
const isInView =
rect.top < window.innerHeight * 0.7 &&
rect.bottom > window.innerHeight * 0.3;
if (isInView) {
activeVideo = video;
}
});
// 处理活跃视频
if (activeVideo) {
stopAllVideos(); // 先停止其他视频
const img = activeVideo.parentElement.querySelector('.right-img');
img.style.display = 'none';
activeVideo.style.display = 'block';
// 自动播放（兼容原生控制栏，用户手动暂停后不会强制播放）
if (activeVideo.paused) {
activeVideo.play().catch((err) => {
console.log('视频播放失败（浏览器限制）：', err);
// 播放失败时回退到图片
activeVideo.style.display = 'none';
img.style.display = 'block';
});
}
} else {
stopAllVideos(); // 无活跃视频时停止所有播放
}
if (isInView) {
activeVideo = video;
}
});
// 处理活跃视频
if (activeVideo) {
stopAllVideos(); // 先停止其他视频
const img = activeVideo.parentElement.querySelector('.right-img');
img.style.display = 'none';
activeVideo.style.display = 'block';
// 自动播放（兼容原生控制栏，用户手动暂停后不会强制播放）
if (activeVideo.paused) {
activeVideo.play().catch((err) => {
console.log('视频播放失败（浏览器限制）：', err);
// 播放失败时回退到图片
activeVideo.style.display = 'none';
img.style.display = 'block';
});
}
} else {
stopAllVideos(); // 无活跃视频时停止所有播放
}
}
// 滚动事件：添加防抖（移动端推荐100-200ms延迟）
window.addEventListener('scroll', function () {
// 清除上一次的定时器
clearTimeout(scrollTimer);
// 滚动停止后150ms再执行核心逻辑
scrollTimer = setTimeout(handleVideoActive, 150);
});
window.onload = function () {
@@ -549,10 +557,10 @@
swiper = new Swiper('.auto-swiper-container', {
autoplay: {
delay: 113000, // 3秒切换
delay: 3000, // 3秒切换
disableOnInteraction: false,
},
loop: true,
loop: false,
slidesPerView: 1,
spaceBetween: 0,
// 启用分页指示标（核心配置）
@@ -582,4 +590,4 @@
</script>
{/block}
{/block}

4
app/index/view/pc/topic_power_prodline/index.html
View File

@@ -549,10 +549,10 @@
swiper = new Swiper('.auto-swiper-container', {
autoplay: {
delay: 113000, // 3秒切换
delay: 3000, // 3秒切换
disableOnInteraction: false,
},
loop: true,
loop: false,
slidesPerView: 1,
spaceBetween: 0,
// 启用分页指示标（核心配置）