fix(diy-rubik-cube): 小米微信小程序魔方组件布局修复

- 取消注释 .template-left/.template-right 的 width: 50%,修复小米
  XWeb 引擎 flex-wrap 子像素舍入差异导致的布局错乱
- 重构 calcRowOneLeftOfTwoRight:将 'px' 追加移出主循环,统一在
  第二层循环处理,避免中途字符串转换
- 清理 calcRowOneLeftOfOneTopOfTwoBottom 中的无效空值表达式
- 优化 row1-lt-of2-rt 模板右侧最后一项条件判断 marginBottom
This commit is contained in:
2026-05-13 18:23:56 +08:00
parent a252d42b62
commit 698d419525

View File

@@ -19,7 +19,7 @@
<template v-for="(item, index) in list">
<template v-if="index > 0">
<view :key="index" :class="['item', value.mode]" @tap.stop="handlerClick(item.link, item.imageUrl)"
:style="{ marginBottom: value.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
:style="{ marginBottom: index < list.length - 1 ? value.imageGap * 2 + 'rpx' : 0, width: item.imgWidth, height: item.imgHeight + 'px' }">
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
:style="item.pageItemStyle" show-menu-by-longpress />
</view>
@@ -235,8 +235,6 @@ export default {
*/
calcRowOneLeftOfTwoRight() {
let rightHeight = 0; // 右侧两图平分高度
let divide = 'left'; // 划分规则,left:左,right:右
if (this.list[1].imgWidth === this.list[2].imgWidth) divide = 'right';
uni.getSystemInfo({
success: res => {
this.list.forEach((item, index) => {
@@ -246,12 +244,14 @@ export default {
item.imgWidth = item.imgWidth / 2;
item.imgHeight = item.imgWidth * ratio;
rightHeight = (item.imgHeight - uni.upx2px(this.value.imageGap * 2)) / 2;
item.imgWidth += 'px';
} else {
item.imgWidth = this.list[0].imgWidth;
item.imgHeight = rightHeight;
}
});
// 统一追加 px 单位
this.list.forEach((item) => {
item.imgWidth += 'px';
});
}
});
},
@@ -311,7 +311,6 @@ export default {
this.list.forEach((item, index) => {
item.imgWidth += 'px';
item.imgHeight;
});
}
});
@@ -482,7 +481,7 @@ export default {
// 一左两右
.rubik-cube .template-left,
.rubik-cube .template-right {
// width: 50%;
width: 50%;
box-sizing: border-box;
}