zhongze-front/src/pages/intoTime/App.js

import Swiper from 'swiper/bundle'
import gsap from 'gsap'
import LocomotiveScroll from 'locomotive-scroll';
import Common from '../common/js/Common'
import {
    isMobile
} from '../common/js/utils'

export default class App {
    constructor() {
        let common = new Common(document.querySelector('.main'),0)   //导航菜单高亮，0是首页，后面的按顺序添加
        this.isMobile = isMobile()
        
        this.scroll = new LocomotiveScroll();
        // 图片及视频资源懒加载。防止阻塞js执行
        let lazyDoms = document.querySelectorAll(".lazy");
        let isMob=this.isMobile;
        lazyDoms.forEach((item) => {
            if (item.nodeName == "PICTURE") {
                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
                item.children[1].setAttribute("src", item.children[1].dataset.src);
            }
            if (item.nodeName == "IMG") {
                if(isMob){item.setAttribute("src", item.dataset.srcm);}
                else{
                    item.setAttribute("src", item.dataset.src);
                }
                
            }
            if (item.nodeName == "VIDEO") {
                console.log(item, 'item---2')
                item.setAttribute("src", item.dataset.src);
                // item.load();
            }
        });
        this.timerFun();
    }
    timerFun() {
        let _this=this;
        //布置移动端内容
        let isMob=this.isMobile;
        if(isMob){
            let timeAllm=document.querySelector('.timeAllm');
            let timeLis=document.querySelectorAll('.timeLi');
            let timeLisArray = Array.from(timeLis);
            // 提取 year 值并排序
            timeLisArray.sort((a, b) => {
                let yearA = parseInt(a.querySelector('.year').textContent, 10);
                let yearB = parseInt(b.querySelector('.year').textContent, 10);
                return yearB - yearA; // 从大到小排序
            });
            timeLisArray.forEach((item,index)=>{
                timeAllm.appendChild(item)
            })
        }else{
            //pc端点击事件
            let timeCks=document.querySelectorAll('.timeY');
            let timeUls=document.querySelectorAll('.timeUl');
            let ulScrolls=[];
            let verticalScrollPosition = document.getElementById('yourElementId').offsetTop;
            console.log(verticalScrollPosition,8888);
            
            // 初始化 ulScrolls 数组
            let num=0;
            timeUls.forEach((ul, index) => {
                ulScrolls.push(ul);
            });
            timeCks.forEach((item,index)=>{
                
                item.addEventListener('click',()=>{
                    timeCks.forEach((item2,index2)=>{
                        item2.classList.remove('timeCk');
                        // timeUls[index2].classList.remove('timeShow');
                    })
                    item.classList.add('timeCk');
                    // timeUls[index].classList.add('timeShow');
                    _this.scroll.scrollTo(timeUls[index]);
                })
            });
            // 添加滚动事件监听器
            // let fourCon = document.querySelector(".fourCon");
            function updateScrollChange1() {
                try {
                    // let hh = fourCon.getBoundingClientRect();
                    let scrollY = window.scrollY;
                    ulScrolls.forEach((item, index) => {
                            if (scrollY >= item.offsetTop&&scrollY < item.offsetTop+item.scrollHeight) {
                                timeCks.forEach((item2,index2)=>{
                                    item2.classList.remove('timeCk');
                                })
                                timeCks[index].classList.add('timeCk');
                            }
                        
                    });
                    console.log(scrollY,ulScrolls);
                    
                } catch (error) { }
            }
            window.addEventListener('scroll', updateScrollChange1);
        }
    }
    

}