Skip to content

遇到的问题 && 解决方案

  1. 相同页面下,切换标签后,不同标签的 Viewer 实例的 update 方法没有起作用
    • 这个可能是和 Viewer.js 内部实现有关,同一个页面不同地方使用 Viewer 会互相产生影响
    • 由于不能改变页面设计,只能改变实现方式,于是尝试将 Viewer 抽离出来,两个标签共用一个 viewer,然而又会有其他问题。(忘了什么问题了)
    • 最后采用的方案是,抽离 Viewer,两个标签共用一个 viewer,同时,不采用循环渲染 img 标签,而是只采用一个 img 标签,然后动态替换 img 标签的 url 实现。
  2. Viewer 有图片放大缩小的需求,采用 zoom 方法,在滚轮放大缩小的时候会导致图片中心偏移 禁用 zoom 功能,在配置项里面有 zoomable,置为 false 就好了。然后放大缩小采用 scale 来进行,用一个变量控制 scale 的值,同时监听 wheel 事件,在发生滚动时,控制 scale 的值,并更新图片的 scale
  3. 采用自定义的 toolBar 会部分遮挡住图片上方,需要往下偏移 toolBar 的高度一半
    • 在 Viewer 配置项里面定义 viewed 事件,在这里操作图片元素,margin 值增加 toolBar 高度的一半
    • 在旋转后,也要处理,将图片往下偏移
    • 这样处理的缺陷就是图片打开时的动画从小到大,等动画结束后,再向下偏移,整体不连贯,不能做到先偏移,再有放大动画
    • 最后是将打开的过渡动画关闭掉