十大免费网站免费下载软件,网站建设linux,wordpress网站加密码,深圳市住房和建设局领导班子成员使用了官方推荐的相册模式的预览#xff0c;但是点击预览之后#xff0c;每次都是从图片列表的第一张开始预览#xff0c;而不是点击哪张就从哪张开始预览#xff1a;
所以这里我就封装了一下#xff0c;对初始化预览的列表进行了逻辑处理#xff1a;
当点击开始预览的…使用了官方推荐的相册模式的预览但是点击预览之后每次都是从图片列表的第一张开始预览而不是点击哪张就从哪张开始预览
所以这里我就封装了一下对初始化预览的列表进行了逻辑处理
当点击开始预览的时候要找到当前图片在预览图列表中的索引然后设置为当前预览图索引然后等点击左右切换的时候要改变这个索引所以要使用onChange函数等点击关闭按钮的时候还要重置这个索引为点击时候的图片索引
import ./index.scss
import { Image } from antd
import { useState } from reactexport default function ImageItem(props: any) {// console.log(props, props)const preList [https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp,https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp,https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp,]const [preIndex, setIndex] useState(preList.indexOf(props.imgUrl))// 当点击前后切换的时候修改当前预览图const handleSwitch (current: number, prevCurrent: number) {console.log(切换预览图, current, prevCurrent)setIndex(current)}// 关闭预览图是重置预览为当前图索引const handleClose (visible: boolean) {console.log(关闭预览图, visible)if (!visible) {setIndex(preList.indexOf(props.imgUrl))}}return (div classNamefileImage.PreviewGroupitems{preList}preview{{minScale: 0.1,current: preIndex,onChange: handleSwitch,onVisibleChange: handleClose,}}Image classNameitem-img src{props.imgUrl} //Image.PreviewGroup/div)
}预览结果:
