uni-app 更新HBuildx版本到3.2.15.20211120后 单位rpx有误差 如单元格设置132rpx和396rpx dom中表现不一致 造成合并表格会错位

uni-app 更新HBuildx版本到3.2.15.20211120后 单位rpx有误差 如单元格设置132rpx和396rpx dom中表现不一致 造成合并表格会错位

开发环境 版本号 项目创建方式
Windows win10企业版 -
产品分类:HbuilderX

### 示例代码:
```vue
<template>  
    <view>  
        <scroller class="data-container row">  
            <list :show-scrollbar="false" :bounce="false" :style="{width: '152rpx', height: '2560rpx'}" scrollable="false">  
                <cell v-for="(item,index) in list" :key="index">  
                    <view class="text-box-column" style="width: 152rpx;">  
                        <text style="background-color: #007AFF;">{{index}}</text>  
                    </view>  
                </cell>  
            </list>  
            <scroller scroll-direction="horizontal"  
                :bounce="false"  
                :show-scrollbar="false"  
                style="width: 598rpx;"  
            >  
                <list :show-scrollbar="false" :bounce="false" :style="{width: `${data.length*128}rpx`, height: '2560rpx'}" scrollable="false">  
                    <cell v-for="(item,index) in list" :key="index">  
                        <view class="row">  
                            <view v-for="($item,i) in item" :key="i" class="text-box-column"  
                                :style="{width: index==0&&(i==2||i==5)? 128*i+'rpx':'128rpx"}"  
                            >  
                                <text>{{$item}}</text>  
                            </view>  
                        </view>  
                    </cell>  
                </list>  
            </scroller>  
        </scroller>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                data: [],  
                list: [],  
                height: 0  
            }  

        },  
        onShow() {  
            this.height = uni.getSystemInfoSync().windowHeight  
        },  
        mounted() {  
            uni.hideTabBar()  
            for(let i=0; i< 20; i++) {  
                this.data.push(i)  
                this.list[i] = []  
                for(let k=0; k<20;k++) {  
                    this.list[i].push(i*k+k+i)  
                }  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .row{  
        flex-direction: row;  
    }  
    .column{  
        flex-direction: column;  
    }  
    .data-container{  
        width: 750rpx;  
        left: 0;  
        top: 0;  
        position: fixed;  
        bottom: 0;  
        background-color: #FFFFFF;  
    }  
    .text-box-column{  
        height: 128rpx;  
        justify-content: center;  
        flex-direction: column;  
        align-items: center;  
        border-right-width: 1rpx;  
        border-bottom-width: 1rpx;  
        border-top-width: 1rpx;  
        border-color: #EEEEEE;  
        width: 132rpx;  
        color: #FFFFFF;  
        background-color: #FFFFFF;  
        box-shadow: 1rpx 1rpx 5rpx #C9C9C9;  
    }  
</style>

操作步骤:

  • 合并2格宽度正常,合并5格宽度异常

预期结果:

  • 按照设置的倍数解析

实际结果:

  • 超过2格的合并宽度解析都不对

bug描述:

更新HBuildx版本到3.2.15.20211120后,单位rpx有误差,如单元格设置132rpx和396rpx,dom中表现不一致,造成合并表格会错位

文件下载


更多关于uni-app 更新HBuildx版本到3.2.15.20211120后 单位rpx有误差 如单元格设置132rpx和396rpx dom中表现不一致 造成合并表格会错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

有对比图吗

更多关于uni-app 更新HBuildx版本到3.2.15.20211120后 单位rpx有误差 如单元格设置132rpx和396rpx dom中表现不一致 造成合并表格会错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html


对比图我更新上来了

在之前的版本中都是对的,但是更新到3.2.15.20211120后就错位了,是不是跟更新了rpx的算法有关系

沉贴了,大佬

合并对比图


该问题已确认 临时解决方案配置dynamicRpx=true 参考文档 https://uniapp.dcloud.io/collocation/pages?id=globalstyle

大佬,现在纵向又开始错位了,而且横向错位这个也是配置的属性,经过测试,取消这个配置,纵向不错位,横向错位,配置这个属性横向不错位,纵向错位,这个在之前几个版本是没有出现纵向错位的

回复 7***@qq.com: 所有设备都这样吗 不排除是设备问题

回复 DCloud_Android_ST: 对比了几个版本和不同机型后发现,纵向错位是因为设置了dynamicRpx=true,安卓和ios都是有这个问题

回复 7***@qq.com: 你现在HX用的什么版本呢

回复 DCloud_Android_ST: 3.3.13.20220314

回复 7***@qq.com: 建议你把box-shadow去掉再试试

回复 DCloud_Android_ST: 你好,我这边有这个问题相关的demo,麻烦你看一下,我这边看了一下dom,右边list里面的view存在margin异常

回复 7***@qq.com: demo我放在下面了,劳烦看一下

纵向错位demo

这个问题是由于HBuilderX 3.2.15.20211120版本中rpx单位计算逻辑调整导致的。在特定场景下,rpx单位的四舍五入处理方式发生了变化,导致合并单元格时出现像素级误差。

从你的代码分析,问题主要出现在动态计算宽度时:

:style="{width: index==0&&(i==2||i==5)? 128*i+'rpx':'128rpx'}"

解决方案:

  1. 临时解决方案:将rpx单位改为px单位,避免rpx计算误差
:style="{width: index==0&&(i==2||i==5)? 128*i/750*windowWidth+'px':'128rpx'}"
  1. 推荐方案:使用flex布局替代固定宽度计算
<view class="row" style="flex-wrap: nowrap;">
    <view v-for="($item,i) in item" :key="i" 
        class="text-box-column"
        :style="{flex: index==0&&(i==2||i==5)? i : 1}">
        <text>{{$item}}</text>
    </view>
</view>
  1. CSS优化:避免在模板中写复杂样式计算,改为计算属性
computed: {
    cellStyle() {
        return (index, i) => {
            if(index === 0 && (i === 2 || i === 5)) {
                return { width: `${128 * i}rpx` };
            }
            return { width: '128rpx' };
        }
    }
}
回到顶部