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:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user