修改索引错误问题

H5/public/data/myData.js

@@ -1,5 +1,5 @@
 // 自己电脑的路径地址
-const myUrlTemp1 = 'http://192.168.0.68:8080/myData/'
+const myUrlTemp1 = 'http://192.168.20.55:8080/myData/'
 // 打包到服务器的路径地址
 const myUrlTemp2 = '/zuan/myData/'
 

H5/src/pages/A1home/data.ts

@@ -24,7 +24,7 @@ export const imgInitFu = () => {
   })
 
   function rendered(carousel: any) {
-    console.log(carousel.nearestItem())
+    // console.log(carousel.nearestItem())
     title.text(carousel.nearestItem()?.element?.alt)
 
     // Fade in based on proximity of the item

H5/src/pages/A1home/index.tsx

@@ -1,18 +1,18 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import history, { HomeDataRow, myData, myUrl } from '@/utils/history'
 import classNmaes from 'classnames'
 import A1info from './A1info'
 import { imgInitFu } from './data'
 import useMove from '@/components/useMove'
-import { Swiper, SwiperSlide } from 'swiper/react';
+import { Swiper, SwiperSlide } from 'swiper/react'
 
-import 'swiper/css';
-import 'swiper/css/effect-coverflow';
-import 'swiper/css/pagination';
-import 'swiper/css/navigation';
+import 'swiper/css'
+import 'swiper/css/effect-coverflow'
+import 'swiper/css/pagination'
+import 'swiper/css/navigation'
 
-import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';
+import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules'
 declare global {
   //设置全局属性
   interface Window {
@@ -23,32 +23,37 @@ declare global {
 }
 
 function A1home() {
-
-  const loadedUrls = useRef(new Set<string>()); // 新增：用于跟踪已加载的图片URL
+  const loadedUrls = useRef(new Set<string>()) // 新增：用于跟踪已加载的图片URL
   const progressRef = useRef<any>(null)
   const progressBarRef = useRef<any>(null)
 
   const imgLoding = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
     progressBarRef.current.style.display = 'block'
-    const img = e.currentTarget;
+    const img = e.currentTarget
     // 使用URL去重，避免同一图片多次触发
     if (!loadedUrls.current.has(img.src)) {
-      loadedUrls.current.add(img.src);
-      console.log('实际加载进度:', loadedUrls.current.size, '/', myData.homeData.length);
+      loadedUrls.current.add(img.src)
+      // console.log('实际加载进度:', loadedUrls.current.size, '/', myData.homeData.length)
       // 更新进度条宽度
-      progressRef.current.style.width = `${loadedUrls.current.size / myData.homeData.length * 100}%`
+      progressRef.current.style.width = `${
+        (loadedUrls.current.size / myData.homeData.length) * 100
+      }%`
       if (loadedUrls.current.size === myData.homeData.length) {
         progressBarRef.current.style.display = 'none'
-        console.log('所有图片加载完成');
-        imgInitFu();
+        // console.log('所有图片加载完成')
+        imgInitFu()
       }
     }
-  }, []);
+  }, [])
 
   const [acId, setAcId] = useState(-1)
   // 当前索引
   const [index, setIndex] = useState(-1)
 
+  // useEffect(() => {
+  //   console.log('当前索引：', index)
+  // }, [index])
+
   const timeRef = useRef(-1)
 
   useEffect(() => {
@@ -58,7 +63,6 @@ function A1home() {
         setAcId(myData.homeData[index].id)
         swiperRef.current.swiper.slideToLoop(myData.homeData.length - index - 1)
         // console.log('当前索引', myData.homeData.length - index - 1);
-
       }, 20)
     }
   }, [index])
@@ -69,8 +73,6 @@ function A1home() {
     }
   }, [])
 
-
-
   const moveRef = useRef<any>(null)
   const swiperRef = useRef<any>(null)
 
@@ -119,6 +121,11 @@ function A1home() {
 
   // 打开详情
   const [open, setOpen] = useState({} as HomeDataRow)
+
+  // 轮播图数据
+  const swArr = useMemo(() => {
+    return myData.homeData.slice().reverse()
+  }, [])
   return (
     <div
       className={styles.A1home}
@@ -159,43 +166,46 @@ function A1home() {
         grabCursor={true}
         centeredSlides={true}
         loop={true}
-        slidesPerView={'1'}
+        slidesPerView={1}
         coverflowEffect={{
           rotate: 0,
           stretch: -60,
           depth: 150,
-          modifier: 4,
+          modifier: 4
         }}
         pagination={{ el: '.swiper-pagination', clickable: true }}
         navigation={{
           nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-          clickable: true,
+          prevEl: '.swiper-button-prev'
+          // clickable: true,
         }}
         modules={[EffectCoverflow, Pagination, Navigation]}
-        className="swiper_container"
+        className='swiper_container'
         onTransitionEnd={(swiper: unknown) => {
           const swiperInternal = swiper as { loopFix: () => void }
           swiperInternal.loopFix()
         }}
       >
-        {
-          myData.homeData.slice().reverse().map((item, index) => (
-            <SwiperSlide key={item.id}>
-              {/* <img
+        {swArr.map(item => (
+          <SwiperSlide key={item.id}>
+            {/* <img
                 hidden={acId !== item.id}
                 style={{
                   width: '100%',
                   height: '100%',
                   objectFit: 'contain',
                 }} src={myUrl + item.cover} alt="slide_image" /> */}
-              {index >= 0 && <div className="contentTxt" style={{ opacity: acId === item.id ? '1' : '0' }} >
-                <div className="title">{myData.homeData[index].name}</div>
-                <div className="txt">{myData.homeData[index].txt}</div>
-              </div>}
-            </SwiperSlide>
-          ))
-        }
+            {index >= 0 && (
+              <div
+                className='contentTxt'
+                style={{ opacity: acId === item.id ? '1' : '0' }}
+              >
+                <div className='title'>{myData.homeData[index].name}</div>
+                <div className='txt'>{myData.homeData[index].txt}</div>
+              </div>
+            )}
+          </SwiperSlide>
+        ))}
       </Swiper>
 
       {/* 左右滑动 */}
@@ -213,7 +223,7 @@ function A1home() {
 
       {/* 进度条 */}
       <div ref={progressBarRef} className='progressBar'>
-        <div ref={progressRef} className='progress' ></div>
+        <div ref={progressRef} className='progress'></div>
       </div>
 
       {/* 打开详情 */}