微信小程序消除图片拼接接缝

由于项目需要，在一些落地页，以及专题页和首页中，需要放置单列、2列、3列以及4列的广告图。用户可以根据需要，通过在系统后端上传图片，自己搭建一些广告效果。单列的图片可以多张铺满屏幕，主要是商品或活动信息展示，多列的图片可以模拟多产品或专题选择的效果。

对于单列广告图，设置样式宽度100%、2列设置宽度50%、3列的设置为250rpx正好是1/3屏幕，4列的设为25%。在<image>标签里，设置mode='widthFix'，让小程序内部自己计算高度。这样基本就可以满足需求了。

然而，情况并没有想象中简单。在一些机型的手机上（诸如iPhone12、13），有些单列图之间出现了水平缝隙，一些并排的多列图之间也出现了竖向的缝隙。

通过网上搜索和自己的实验，有了比较简单的解决方法：

1. 解决竖向排版的单列图之间的缝隙，在图片样式上加一句margin-top: -1rpx;基本就可以了。

2. 解决多列图间的缝隙，把图片放大一点点就行了，比如样式：transform: scale(1.01); 。

这2个方法十分简单，但是并不能保证效果最好。虽然在有问题的机型上消除了缝隙，但是在一些本来没有问题的机型上，仔细看，有些地方会发现拼接处少了一行或一列像素。对于拼接处细节明显，或者要求高质量视觉效果的场合，上面2个解决方法达不到最好的效果。

观察图片的绘制大小，最后猜测，缝隙出现的根源，是由于图片绘制大小宽或高数值中有带小数，导致画在屏幕上时，对小数的取舍出现问题，基于此思路，想到了最后这个方法：

3. 在Js脚本中计算图片显示宽高，并将结果调整至整数数值：

这个方法需要用到image组件的bindload事件。这个事件图片载入完毕时触发，而且返回图片（原图）的宽和高。

下面这段js代码是bindload响应函数示例，实现2列广告图，图片的显示宽与高计算：

// 广告图2列图片加载，计算显示大小，避免拼接图片间白缝onAdImgLoad: function(e){var imgIdx = e.currentTarget.dataset.idx;const sw = wx.getSystemInfoSync().screenWidth, srcW = e.detail.width, srcH = e.detail.height;var displayW = Math.floor(sw / 2), displayH = Math.floor(sw / 2 * srcH / srcW);if(sw % 2 == 1 && imgIdx % 2 == 1) displayW += 1;this.setData({ [`adList[${imgIdx}].imgW`]:  displayW,[`adList[${imgIdx}].imgH`]:  displayH});},

先计算图片宽是屏幕的一半，并舍去小数（使用floor），按比例算出高度（也舍去小数）。然后如果屏幕宽为奇数，则在每行第2张图的宽上加上1个像素，补足全屏宽度。

在wxml中，用style给图片宽、高赋值即可：

（省略了image外层的for循环和其他wxml代码）

<image src='{{item.FileName}}' bindload='onAdImgLoad' data-idx="{{index}}"
style="width:{{item.imgW}}px; height:{{item.imgH}}px;"></image>

这个计算也有细小误差，但大小不超过1个像素，也不会少绘制一行或一列像素，视觉观察不到，可以忽略不计。所以相对来说，是效果最好的一个方法了。这里就列举了2列平铺广告图的处理，其他的3列、4列等，可以类推，这里不再赘述了。

微信小程序消除图片拼接接缝相关推荐

微信小程序/h5图片拼接出现白线问题
一.为什么会出现白线出现白线,可能原因1是图片宽高出现半个像素点,可能原因2布局不为块状布局,导致出现行高咱局部分高度,导致部分手机出现白线, 二.解决方法 1.在父级div加上font-size: ...
微信小程序开发——消除Now you can provide attr `wx:key` for a `wx:for` to improve performance.
在开发微信小程序的是遇到了WXML Runtime warning:Now you can provide attrwx:key for awx:forto improve performance. ...
微信小程序一些常见的坑
1.小程序都报wxss编译错误解决方法: 在控制台输入openVendor() ,清除里面的wcsc wcsc.exe 然后重启工具 2.微信小程序wx:for警告 Now you can prov ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
实时视频直播客户端技术盘点：Native、HTML5、WebRTC、微信小程序
1.视频直播客户端技术之Native APP 原生 APP 终端音视频引擎的结构框图如下,基本包括了音频引擎.视频引擎和网络传输,合称实时语音视频终端引擎.这里还包含底层的音视频采集和渲染,还有网络的 ...
微信小程序开发开篇词自顶向下，云端赋能：小程序的高效开发之道
你好,我是周俊鹏,做前端开发已经 6 年多了,目前我就职于腾讯云 TCB 团队,负责腾讯云开发 CloudBase 前端相关的研发和生态建设工作.我可以说是第一批次的微信小程序开发者,2016 年 9 ...
微信小程序开发的基本用法
微信小程序开发的基本用法 1.数组或对象的遍历 1.1.数组遍历 wx:for="{{数组或对象}}" wx:for-item="循环项的名称" wx:for- ...
基于微信小程序的大学生心理健康测试设计与实现 .docx
目录 1 绪论 3 1.1 项目开发背景 3 1.2 项目开发意义 3 1.3 项目主要的内容 4 2 相关技术介绍及系统环境开发条件 5 2.1相关技术介绍 5 2.2系统环境开发条件 6 3 系统 ...
微信小程序开发常见warnings警告解决方案
在小程序开发过程中,只要稍不注意代码细节,就会出现很多 warnings 警告,虽然在对小程序的运行并没有什么影响,但是作为一名严谨的程序猿,是不允许它们存在的. 下面我将从我的实际项目开发过程中碰到 ...

微信小程序消除图片拼接接缝

微信小程序消除图片拼接接缝相关推荐

最新文章

热门文章

微信小程序 消除图片拼接接缝

微信小程序 消除图片拼接接缝相关推荐

最新文章

热门文章

微信小程序消除图片拼接接缝

微信小程序消除图片拼接接缝相关推荐