upp

src/App.tsx

@@ -46,18 +46,29 @@ export default function App() {
       <AsyncSpinLoding />
 
       {/* 所有图片点击预览查看大图 */}
-      <Image
+      <Image.PreviewGroup
         preview={{
           visible: lookBigImg.show,
-          src: lookBigImg.url,
+          current: lookBigImg.current,
+          onChange: (e) => {
+            store.dispatch({
+              type: "layout/lookBigImg",
+              payload: {
+                show: true,
+                url: lookBigImg.url,
+                current: e,
+              },
+            });
+          },
           onVisibleChange: (value) => {
             // 清除仓库信息
             store.dispatch({
               type: "layout/lookBigImg",
-              payload: { url: "", show: false },
+              payload: { url: [], show: false, current: 0 },
             });
           },
         }}
+        items={lookBigImg.url}
       />
 
       {/* antd 轻提示 ---兼容360浏览器 */}

src/AppM.tsx

@@ -5,10 +5,7 @@ import { Router, Route, Switch } from "react-router-dom";
 import history from "./utils/history";
 import SpinLoding from "./components/SpinLoding";
 import AsyncSpinLoding from "./components/AsyncSpinLoding";
-import { useSelector } from "react-redux";
-import store, { RootState } from "./store";
 import NotFound from "./components/NotFound";
-import { ImageViewer } from "antd-mobile";
 import screenImg from "@/assets/img/landtip.png";
 
 const A1HomeM = React.lazy(() => import("./pages/A1HomeM"));
@@ -17,11 +14,6 @@ const A3GoodsM = React.lazy(() => import("./pages/A3GoodsM"));
 const A4IntroM = React.lazy(() => import("./pages/A4IntroM"));
 
 export default function App() {
-  // 从仓库中获取查看图片的信息
-  const lookBigImg = useSelector(
-    (state: RootState) => state.A0Layout.lookBigImg
-  );
-
   const setFullFu = useCallback(() => {
     clearTimeout(time.current);
     time.current = window.setTimeout(() => {
@@ -72,19 +64,6 @@ export default function App() {
       {/* 发送请求的加载组件 */}
       <AsyncSpinLoding />
 
-      {/* 所有图片点击预览查看大图 */}
-      <ImageViewer
-        image={lookBigImg.url}
-        visible={lookBigImg.show}
-        onClose={() => {
-          // 清除仓库信息
-          store.dispatch({
-            type: "layout/lookBigImg",
-            payload: { url: "", show: false },
-          });
-        }}
-      />
-
       {/* 横屏提示 */}
       <div id="ScreenChange">
         <img src={screenImg} alt="" />

src/components/ImageLazy/index.tsx

@@ -34,7 +34,7 @@ function ImageLazy({
   const lookBigImg = useCallback(() => {
     store.dispatch({
       type: "layout/lookBigImg",
-      payload: { url: offline ? src : baseURL + src, show: true },
+      payload: { url: [offline ? src : baseURL + src], show: true, current: 0 },
     });
   }, [offline, src]);
 

src/pages/A4Intro/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import styles from "./index.module.scss";
 import backImg from "@/assets/img/back.png";
 import history from "@/utils/history";
@@ -28,6 +28,16 @@ function A4Intro() {
     return dom;
   }, [dataRes.imgNum]);
 
+  const lookArr = useCallback(() => {
+    const arr = [] as string[];
+
+    imgArr.forEach((v, i) => {
+      arr.push(`${baseURL}/4Intro/pc/${i + 1}.jpg`);
+    });
+
+    return arr;
+  }, [imgArr]);
+
   return (
     <div
       className={styles.A4Intro}
@@ -71,7 +81,7 @@ function A4Intro() {
             // onSlideChange={() => console.log("slide change")}
             // onSwiper={(swiper) => console.log(swiper)}
           >
-            {imgArr.map((v) => (
+            {imgArr.map((v, i) => (
               <SwiperSlide key={v}>
                 <img
                   onClick={() =>
@@ -79,7 +89,8 @@ function A4Intro() {
                       type: "layout/lookBigImg",
                       payload: {
                         show: true,
-                        url: `${baseURL}/4Intro/pc/${v + 1}.jpg`,
+                        url: lookArr(),
+                        current: i,
                       },
                     })
                   }

src/pages/A4IntroM/index.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
-import store, { RootState } from "@/store";
+import { RootState } from "@/store";
 import { baseURL } from "@/utils/http";
 import backImg from "@/assets/img/back.png";
 import history from "@/utils/history";
@@ -11,6 +11,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation } from "swiper";
 import "swiper/css";
 import "swiper/css/navigation";
+import { ImageViewer } from "antd-mobile";
 
 function A4IntroM() {
   const data = useSelector((state: RootState) => state.A0Layout.dataAll.Home);
@@ -28,6 +29,26 @@ function A4IntroM() {
     return dom;
   }, [dataRes.imgNum]);
 
+  const lookArr = useCallback(() => {
+    const arr = [] as string[];
+
+    imgArr.forEach((v, i) => {
+      arr.push(`${baseURL}/4Intro/pc/${i + 1}.jpg`);
+    });
+
+    return arr;
+  }, [imgArr]);
+
+  const lookBigImgFu = useCallback(
+    (i: number) => {
+      ImageViewer.Multi.show({
+        images: lookArr(),
+        defaultIndex: i,
+      });
+    },
+    [lookArr]
+  );
+
   return (
     <div
       className={styles.A4IntroM}
@@ -75,18 +96,23 @@ function A4IntroM() {
           // onSlideChange={() => console.log("slide change")}
           // onSwiper={(swiper) => console.log(swiper)}
         >
-          {imgArr.map((v) => (
-            <SwiperSlide key={v}>
+          {imgArr.map((v, i) => (
+            <SwiperSlide
+              key={v}
+              onClick={
+                () => lookBigImgFu(i)
+
+                // store.dispatch({
+                //   type: "layout/lookBigImg",
+                //   payload: {
+                //     show: true,
+                //     url: lookArr(),
+                //     current: i,
+                //   },
+                // })
+              }
+            >
               <img
-                onClick={() =>
-                  store.dispatch({
-                    type: "layout/lookBigImg",
-                    payload: {
-                      show: true,
-                      url: `${baseURL}/4Intro/pc/${v + 1}.jpg`,
-                    },
-                  })
-                }
                 className="swImg"
                 src={`${baseURL}/4Intro/pc/${v + 1}.jpg`}
                 alt=""

src/store/reducer/layout.ts

@@ -1,13 +1,16 @@
 import { DataAllType, LookDomType } from "@/types";
 import { MessageType } from "@/utils/message";
 
+type lookType = { url: string[]; show: boolean; current: number };
+
 // 初始化状态
 const initState = {
   // 所有图片点击预览查看大图
   lookBigImg: {
-    url: "",
+    url: [],
     show: false,
-  },
+    current: 0,
+  } as lookType,
   // 查看视频、音频、模型
   lookDom: {
     src: "",
@@ -27,7 +30,7 @@ const initState = {
 
 // 定义 action 类型
 type LayoutActionType =
-  | { type: "layout/lookBigImg"; payload: { url: string; show: boolean } }
+  | { type: "layout/lookBigImg"; payload: lookType }
   | { type: "layout/lookDom"; payload: LookDomType }
   | { type: "layout/message"; payload: MessageType }
   | { type: "layout/setDataAll"; payload: DataAllType };