大图组件功能点及主要功能点技术实现说明
大图头部组件：图片标题，退出大图
大图主体-轮播图组件：单击查看图片，当前图定位到轮播图中部，滚动选择图片
借用插件
react-virtualized-auto-sizer实现虚拟列表优化长列表，父元素resize，子元素自动调节填充个数借用插件
react-window实现指定滚动偏移主要代码
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={styles.slider}
>
<div className={styles.sliderBody}>
<AutoSizer>
{({ height }) => {
OneScreenHeight.current = height
return (
<FixedSizeList
ref={listRef}
className="List"
height={height}
itemCount={itemList.length}
itemSize={ITEM_HEIGHT}
width={SLIDER_WIDTH}
style={{ overflow: showScroll }}
initialScrollOffset={
selectedItemIndex * ITEM_HEIGHT > height
? selectedItemIndex * ITEM_HEIGHT
: 0
}
itemData={{
itemList,
dispatch,
selectedItem
}}
>
{Row}
</FixedSizeList>
)
}}
</AutoSizer>
</div>
<div className={styles.sliderFooter}>
{selectedItemIndex + 1}/{itemList.length}
</div>
</div>
大图主体-mainBody组件： 展示1000*1000的大图或原图，支持放大缩小拖拽
借用
Matrix实现图片的放大，缩小和位移
主要代码
useEffect(() => {
// 图片在容器X轴或Y轴上可移动的距离发生变化，会引发两种情况
// 1、canMoveX或canMoveY为0，则清空位移
// 2、因为比例缩小导致图片在容器内偏移，那么我们纠正位置，让图片贴近相邻的容器边，不要缩进去
setMatrix((preMatrix) => ({
...preMatrix,
e: getMoveXY(preMatrix.e, draggable.canMoveX),
f: getMoveXY(preMatrix.f, draggable.canMoveY)
}))
if (draggable.canMoveX === 0) {
setMoveX(0)
}
if (draggable.canMoveY === 0) {
setMoveY(0)
}
}, [draggable.canMoveX, draggable.canMoveY])
useEffect(() => {
// 用户拖拽X轴产生位移
setMatrix((preMatrix) => ({
...preMatrix,
e: moveX
}))
}, [moveX])
useEffect(() => {
// 用户拖拽Y轴产生位移
setMatrix((preMatrix) => ({
...preMatrix,
f: moveY
}))
}, [moveY])
- 自己动手实现一个取消promise的函数
makePromiseCancelable在快速切换图片时，取消上一张图片请求
取消promise的代码
如果时angualr,就可以直接用rxjs了，但是rxjs和react匹配度不高。。。
export default function makePromiseCancelable(promise: Promise<any>) {
// 创建函数作用域上层标识，为true设置promise.reject
let hasCanceled = false
const wrappedPromise = new Promise((resolve, reject) => {
promise.then((val:any) =>
hasCanceled ? reject(new Error('isCanceled')) : resolve(val)
)
promise.catch((error) =>
hasCanceled ? reject(new Error('isCanceled')) : reject(error)
)
})
return {
promise: wrappedPromise,
cancel() {
hasCanceled = true
}
}
}
export interface cancelPromise {
promise?: Promise<unknown>
cancel:()=>void
}
图片请求的主要代码，这样，用户快速单击不同的图片，上一次图片请求
还没回来就会被取消了~~~
主要还是因为react和rxjs结合很少见
要是angular就可以直接使用rxjs的switchMap 来处理
const getImageUrl = (
url: any,
options: { width: number, height: number }
) => {
const cancelGetImageUrlPromiseObj = makePromiseCancelable(
getSignedPicUrl(url, options)
)
cancelGetImageUrlPromiseObj.promise
.then((imageUrl) => {
setImageUrl(imageUrl as string)
})
.catch((err) => {
console.log(err)
})
prePromiseObj.current && prePromiseObj.current.cancel()
prePromiseObj.current = cancelGetImageUrlPromiseObj
}
useEffect(() => {
const options = showOriginal
? { width: 0, height: 0 }
: { width: 1000, height: 1000 }
const curVersion = versions[versionIndex]
if (curVersion && curVersion.id) {
dispatch({
type: 'bigPicture/updateSelectedVersion',
payload: {
selectedVersionId: curVersion.id
}
})
getImageUrl(curVersion.url, options)
}
}, [versionIndex])
useEffect(() => {
if (showOriginal) {
setOriginLoading(true)
}
const options = showOriginal
? { width: 0, height: 0 }
: { width: 1000, height: 1000 }
getImageUrl(selectedItem.url, options)
}, [selectedItem.url, showOriginal])
- 大图主体-详情栏组件：展示图片详情，标签，版本
<div onContextMenu={(e) => e.preventDefault()}>
{!isPickPicture && onBigPictureModalClose ? (
<ScanPictureHeader
bigPicture={bigPicture}
onBigPictureModalClose={onBigPictureModalClose}
/>
) : null}
<div className={styles.body}>
<section style={{ flexDirection: direction }} className={styles.left}>
<Slider dispatch={dispatch} bigPicture={bigPicture} />
<MainBody
dispatch={dispatch}
bigPicture={bigPicture}
renderSlot={renderSlot}
hiddenDetailButton={isPickPicture}
toolBarStyle={toolBarStyle}
/>
</section>
{bigPicture.showItemTool ? (
<div className={styles.right}>
<SingleItemInfo resourceNode={selectedItem} />
</div>
) : null}
</div>
</div>
轮播图需要单击切换mainBody的图片显示，mainBody有左右按钮也可以切换轮播图的上下张，这两个组件共同维护一份数据存在
bigPictureModel中，这个model中本应该维护的数据：selectedItem: ResourceNode， selectedItemIndex: number， itemList: ResourceNode[]
但因为，历史版本直接复用ResourceList的大图组件，里面有字段isHistoryVersion，控制大图打开时候，获取版本的请求，为历史版本增加
isHistoryVersion?: boolean
versions: Version[] // 当前选择的版本
selectedCurrentVersion: Version // 当前单击选中的版本
selectedVersion: Version
另外，展示详情栏或者进入原图模式是多个组件需要共享和修改的数据，避免层层传递参数和回调，所以增加 showItemTool:boolean， showOriginal:boolean进行维护
大图常规使用场景
- image
选片使用场景
- image
历史版本使用场景
- image
以图搜图使用场景
- image
大图组件食用说明
如果想要使用大图，直接引入组件 <BigPicture/> 传入对应props即可，props属性如下：
itemList: ResourceNode[] 大图资源列表，必填项
selectedItemId: string 默认选中图片id，必填项
visible: boolean 是否挂载大图内部内容，必填项
onClose?: (item: ResourceNode) => void 关闭回调
urlLocation?: boolean 是否需要url定位，默认需要
displayMode?: DisplayMode 展示模式，弹窗展示或不用弹窗，默认使用弹窗
showHeader?: boolean 是否展示头部，默认展示
showSlider?: boolean 是否展示轮播图及左右切换按钮，默认展示
sliderPosition?: SliderPosition 轮播图展示位置，默认在左侧
canShowItemTool?:boolean 是否有详情栏功能，默认有
canShowOriginal?:boolean 是否有原图功能，默认有
defaultShowItemTool?:boolean 初始时，是否展开详情栏，默认不展开
defaultItemToolTab?: string 初始时，展开详情栏，默认选中tab，默认选中详情tab
defaultShowOriginal?:boolean 初始时，是否进入原图，默认不进入
toolbarRenderSlot?:((current: ResourceNode) => React.ReactNode)[] 工具栏可插入的功能，默认空
toolBarStyle?: CSSProperties 工具栏显示位置
其中关于urlLocation增加以下说明：
url的定位需要监听url变化，url的监听写在了BigPicture内，如果要使用大图的url定位，BigPicture需要一直挂载在你的组件内部
如果urlLocation传为true，那么上下切换图片，都是通过改变url来定位到当前url中pictureId选中的图片。如果urlLocation为false，那么上下切换图片，只会修改Dva中的对应的selectItem相关数据
主要代码
const preQuery = history.location.query
history.push({
pathname: history.location.pathname,
query: {
...preQuery,
pictureId: `${item.id}`,
modal: `${true}`
}
})
// 此时你需要监听url参数变化，model为true的时候，提供当前图片的id及列表去打开大图
useEffect(() => {
if (urlQuery && urlQuery.modal && itemList.length > 0) {
dispatch({
type: 'bigPicture/updateState',
payload: {
selectedItemId: urlQuery.pictureId,
itemList,
}
})
setBigPictureModalVisible(true)
}
}, [urlQuery, itemList])
最后展示一下他的使用
