前端问题记录

382 阅读1分钟

1.移动端展示 pdf 问题

现象

利用 iframe src 绑定 pdf 的地址,或者 embed 绑定 src ,程序利用 rn打包成 app 后,在 pad 上无法显示pdf,显示空白。

原因

可能打包的 app 不支持 iframe内嵌pdf,或者打包的程序里面缺少加载 pdf 的插件

解决办法

把 pdf 转化成图片展示。(后端转化,或者前端 canvas转化)

2. pinchZoom 插件特定情况下计算出错 (移动端缩放插件)

现象

在vue里面引入插件,利用 rn打包成 app 后,在安卓版本13 上,利用pinchZoom初始化图片完成后,在当前页面打开 element ui 的 el-dialog 并且点击 input 调起键盘后,会导致插件监听到resize 事件,然后重新计算,从而出错,导致页面空白。鸿蒙系统没有此问题。

正常的页面:

WechatIMG689.jpg

错误的页面:

WechatIMG690.jpg

原因

在上面操作中,程序监听到了页面 resize ,由于是选项卡展示了多张图片,重新计算时隐藏的图片计算出的高度为 0 ,所以导致页面空白。

解决办法

由于在实际业务中,图片渲染完页面窗口不会变化,不需要重新计算,所以注释掉源码监听代码就行了。

尝试过重新渲染监听,重新构造插件生成的dom等方法,均不行;手动设置高度会导致后续的放大缩小有问题。