大图展示组件封装

大图组件功能点及主要功能点技术实现说明

  • 大图头部组件：图片标题，退出大图

  • 大图主体-轮播图组件：单击查看图片，当前图定位到轮播图中部，滚动选择图片

  • 借用插件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])

最后展示一下他的使用


666.gif
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容