前言

本文是【uni-app】rich-text 无法处理 video 的解决办法续集。
用 uParse 富文本解析插件后，一切正常。今天同事突然发了个长图（800px*15150px）。发现版式异常了，如下：

分析

细心人可以看到，图片的两边有留白。

通过上面的截图可以看到，在保持宽高比的前提下，将图片宽度调整为351.2px时，高度应该为6650.85px。
通过上面的截图可以看到，image标签的实际高度为7101.56px。那么，空白就出来了。

通过分析 uParse 组件，当发现图片宽度超过屏幕实际宽度时，则为图片自动计算一个合适的宽度和高度。

因在开发过程中，图片两边的留白为48rpx，uParse 组件不知道留白了48rpx，因此计算屏幕宽度时，少减了48rpx。因此导致计算出的宽和高不合适。

解决办法

计算宽度时，去掉留白部分的宽度。该宽度为48rpx。

找到 wxParseImg.vue 文件。
在 wxParseImg.vue 文件中找到如下代码：

const windowWidth = this.node.$screen.width - (2 * padding);

将上面的代码修改为：

 // 固定留白48rpx。将rpx转化成pxlet reduceWidth = 48 * uni.getSystemInfoSync().windowWidth / 750;const windowWidth = this.node.$screen.width - reduceWidth;

修改后效果

【uni-app】uParse 富文本解析插件遇到长图、大图宽高比异常问题相关推荐

uniapp怎么解析html字符串,uniapp富文本解析插件的详细使用教程
如果你作为文章资源类或者博客类的小程序你就会发现,很多时候你的文章数据都是html格式或md格式,这样如果不经过处理,会非常难看,所以富文本解析就显得格外重要了,今天给大家写一个uniapp怎么使用富 ...
微信小程序 html插件,微信小程序使用wxParse插件读取富文本,解析html标记
微信小程序使用wxParse插件读取富文本,解析html标记发布时间:2018-04-07 作者:Admin 标签: 微信小程序微信小程序解析HTML标记访问量:1203 使用wxParse可以 ...
taro 缺点_Taro小程序富文本解析4种方法
最近遇到一个富文本解析的问题,尝试了很多办法,终于成功了!最后本人选择Parser. 1.Taro组件rich-text 优点:使用极其方便,引用一下就行了. 缺点:不支持视频,放弃! 2.wxPar ...
小程序富文本解析利器mp-html
微慕小程序是资讯.媒体类小程序,因为对富文本内容和媒体内容的显示有较高的需求.对于富文本解析,微慕小程序以前采用的开源的wxParse组件,不过wxParse组件存在很多的问题且已经停止维护支持,随着 ...
微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
富文本解析 wxParse 解析数据造成页面假死
富文本解析 wxParse 解析数据造成页面假死问题描述小程序中总有富文本解析的场景,比如:头条的终端页.我们的终端页使用了 wxParse, 但是由于 wxParse有些小问题,并且项目使用 m ...
浅谈IM软件业务知识-实现富文本解析，如：解析字符串、网络链接等
----------------------------------------------------欢迎查看IM软件业务知识<专栏>-------------------------- ...
小程序解码/富文本解析
小程序富文本解码+富文本解析 //1.使用decodeURIComponent进行转码 js代码contentInfo:decodeURIComponent(res.info) //2. 使用微信官方 ...
小程序富文本解析wxParse 安卓手机部分不支持的一种情形
背景: 建议,对富文本的解析,还是使用官方提供的 <rich-text> 比较好,可参考文章:微信小程序 rich-text 富文本的解析显示在小程序开发过程中,必然会涉及到富文本的解析 ...

【uni-app】uParse 富文本解析插件遇到长图、大图宽高比异常问题

前言

分析

解决办法

修改后效果

【uni-app】uParse 富文本解析插件遇到长图、大图宽高比异常问题相关推荐

最新文章

热门文章