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