https://developers.weixin.qq.com/miniprogram/dev/component/image.html
1、image组件的widthFix模式下,计算高度产生多位小数点;
2、多张图片竖向排列,且将其定义为“display:block”或“display:flex”时,两图片之间不时出现空白间隙;
3、小程序图片height参数中的小数点值,在未满0.5px的情况下,会向下累加;
4、当下一张图的height参数小数点累加达到或超过0.5px时,将会以1px方式渲染;
5、H5端无此现象(亲测);
6、demo项目:https://gitee.com/xuwenqian3146179006/bugdemo.git
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202107/3f63d4ce20c142b4a547383a18688f16.jpg'" mode="widthFix" />
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/287f83251c2a48b3b2f3e3e7bc11b52f.jpg'" mode="widthFix" />
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/04a4c48aa14646768039e7be299a71f9.jpg'" mode="widthFix" />
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/185067658d1e40b59b2b8fa8a75142a6.jpg'" mode="widthFix" />
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/922c0fd2ec0e4681a488191eb1372746.jpg'" mode="widthFix" />
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/d431fe9b16a8403fab1cbf00953f99bf.jpg'" mode="widthFix" />
1、取巧的方案:给每张图片添加:“margin-top:-0.5px;”
---- 方案来源于uniapp的mp-html插件作者提供
image外层再包裹view,加载完成后获取image的长宽赋予给view,可以解决这个问题。但是这个做法吧...图片较多慎用,坑的是自己....
image display: table-cell