小程序---wxParse解决图片大小不适应小程序页面问题

最新推荐文章于 2024-08-08 08:30:08 发布

Ariel_ckr

最新推荐文章于 2024-08-08 08:30:08 发布

阅读量7.7k

点赞数 1

分类专栏：微信小程序开发文章标签：小程序 wxParse改变图片大小

本文链接：https://blog.csdn.net/ariel_201311/article/details/84315759

版权

针对使用wxParse渲染HTML图文信息导致小程序中图片尺寸不适应的问题，可以通过修改wxParse.js文件来解决。具体方法包括调整相关代码段，并替换wxAutoImageCal方法，确保图片在页面中能自适应展示，消除滚动条，提升页面美观度。

摘要由CSDN通过智能技术生成

有时候使用wxParse渲染html的图文信息时，图片会按照原图的大小显示，在小程序页面就容易出现滚动条，这样页面一点都不美观。
在这里插入图片描述

解决办法：

进入wxParse.js文件:

一、

var recal = wxAutoImageCal(e.detail.width, e.detail.height,that,bindName);

改为：

var recal = wxAutoImageCal(e.detail.width, e.detail.height, that, bindName, temImages[idx]);

二、将wxAutoImageCal方法替换为如下代码：

//计算视觉优先的图片宽高
function wxAutoImageCal(originalWidth, originalHeight, that, bindName, temImage) {
   

  var arr = temImage.attr.style;
  var widthIndex = arr.indexOf("width:");

  console.log(widthIndex);

  var widthValue = '';
  if (widthIndex != -1) {
   
    // widthValue = arr[widthIndex + 1];

    console.log(arr);
    var trr = arr.split(";");///sophie
    for (let i = 0