tiefen_space_h5/components/Photos/index.js

"use client";

import React, { useRef, useState } from "react";
import { Image, ImageViewer } from "antd-mobile";
const tabItems = [
  { key: "commend", title: "推荐" },
  { key: "follow", title: "关注" },
];

export default function Photos({ photos }) {
  const showPhotos = (photos, index) => {
    ImageViewer.Multi.show({
      images: photos,
      defaultIndex: index
    })
  };
  return (
    <>
      <div className="flex overflow-auto w-full flex-wrap">
        {photos.map((item, index) => {
          return (
            <div
              key={index}
              className="mr-2 mb-2"
              onClick={() => {
                showPhotos(photos, index);
              }}
            >
              <Image
                width={photos.length > 1 ? "25vw" : 150}
                height={photos.length > 1 ? "25vw" : "auto"}
                className="rounded"
                fit="cover"
                src="https://picsum.photos/seed/picsum/200/300"
              />
            </div>
          );
        })}
      </div>
      
    </>
  );
}