<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>
periH
- 发布：2021-12-02 17:30
- 更新：2022-04-27 14:45
- 阅读：444
【报Bug】更新HBuildx版本到3.2.15.20211120后，单位rpx有误差，如单元格设置132rpx和396rpx，dom中表现不一致，造成合并表格会错位
分类：HBuilderX
产品分类： HbuilderX
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10企业版
HBuilderX版本号： 3.2.16
示例代码：
操作步骤：
合并2格宽度正常，合并5格宽度异常
合并2格宽度正常，合并5格宽度异常
预期结果：
按照设置的倍数解析
按照设置的倍数解析
实际结果：
超过2格的合并宽度解析都不对
超过2格的合并宽度解析都不对
该问题已确认 临时解决方案配置dynamicRpx=true 参考文档 https://uniapp.dcloud.io/collocation/pages?id=globalstyle
-
periH (作者)
大佬，现在纵向又开始错位了，而且横向错位这个也是配置的属性，经过测试，取消这个配置，纵向不错位，横向错位，配置这个属性横向不错位，纵向错位，这个在之前几个版本是没有出现纵向错位的
2022-04-05 21:21
-
-
periH (作者)
回复 DCloud_Android_ST: 对比了几个版本和不同机型后发现，纵向错位是因为设置了dynamicRpx=true，安卓和ios都是有这个问题
2022-04-06 15:12
-
-
-
-
periH (作者)
回复 DCloud_Android_ST: 你好，我这边有这个问题相关的demo，麻烦你看一下，我这边看了一下dom，右边list里面的view存在margin异常
2022-04-27 14:43
-
periH (作者)
对比图我更新上来了
2021-12-17 15:10
periH (作者)
在之前的版本中都是对的，但是更新到3.2.15.20211120后就错位了，是不是跟更新了rpx的算法有关系
2021-12-17 15:13
periH (作者)
沉贴了,大佬
2021-12-27 11:11