微信小程序rpx适配误差问题

最新推荐文章于 2024-09-10 13:33:40 发布

pengboboer

最新推荐文章于 2024-09-10 13:33:40 发布

阅读量5.1k

点赞数 5

分类专栏：微信小程序文章标签：微信小程序计算高度错误 px和rpx转换分割线错位 rpx适配误差

本文链接：https://blog.youkuaiyun.com/pengbo6665631/article/details/103310185

版权

微信小程序专栏收录该内容

3 篇文章

订阅专栏

在开发小程序的时候遇到了两个有关计算view高度发生的问题，解决也花了不少的时间，特此记录一下。

一、计算view高度和实际情况匹配不上

一个列表展开后显示若干卡片，我做了一个展开动画，需要计算总的高度。

// 卡片高度100   上下margin 各为8
height: 110rpx;
margin: 8rpx 6rpx 8rpx 6rpx;



// 我开始计算 一行的高度是126
var height = parseInt(cardCount / 2) * 126;
if (cardCount % 2 != 0) {
   height += 126;
}
var heightValue = height + "rpx";
animation.height(heightValue).opacity(1).step();

在苹果手机（iPhone6）显示的是正确的，安卓手机总是算的比实际的高不少，导致动画结束后整个布局就会被拉长

我们都知道微信小程序rpx和px的转换是这样的： 

var px =  rpx / 750 * wx.getSystemInfoSync().windowWidth

// 如果是375的手机，那么：
1 rpx = 0.5px

// 如果是360的手机，那么
1 rpx = 0.48px

// 如果是414的手机，那么
1 rpx = 0.552px

接下来继续我上面的问题

// 我在调试中发现，我的卡片的高度居然是52px  margin居然是3px，也就是说我一行是58px

// 正常算的话高度是52.8px  margin是3.84px

// 而我自己计算的126rpx 转换为px则是60.48px 去除小数点后是60px

问题所在：小程序在rpx和px转换的时候，把小数点后的值给去了，只保留了整数

那么就有了解决方案

// 计算高度
var cardCount = that.data.list[index].secondList.length;
var cardHeight = parseInt(110 / 750 * wx.getSystemInfoSync().windowWidth);
var cardHeightMargin = parseInt(8 / 750 * wx.getSystemInfoSync().windowWidth);
var height = parseInt(cardCount / 2) * (cardHeight + 2 * cardHeightMargin);
if (cardCount % 2 != 0) {
   height += cardHeight + 2 * cardHeightMargin;
}
var heightValue = height + "px";
// 设置动画属性
animation.height(heightValue).opacity(1).step();

这样算出来的结果就是正确的了，至于上面说的是苹果手机和安卓手机的问题，其实只要是375的手机，显示上就没什么问题，其他宽度的就会出现问题。

二、分割线错位、padding和实际情况对不上

需求是做一个分类的目录（在小程序上搞这个、这需求、都不想吐槽了），每一个item有四根分割线，根据一些逻辑看哪些显示或者不显示，一共5级，那么padding 依次是10、40、70、100、130rpx，逐级递增30rpx，但是做出来就有问题了，上一级底部的竖线和下一级顶部的竖线有可能错开，可能也就1px。不同手机不同的错位，这个手机1级、3级目录是错开的，另一个手机5级目录都是错开的，都是只错开1px。其实和上面的例是一个类型的问题。

//就拿360的手机来说：

10rpx = 4.8 = 4px
40rpx = 19.2 = 19px
70rpx = 33.6 = 33px
100rpx = 48 = 48px
130rpx = 62.4 = 62px

// 我们感觉是逐级差30rpx 没啥问题
// 但是我们看看结果，他们之间差的有可能是15px也有可能是14px
// 这就是导致错位的结果

那么就有了解决方案

// onLoad中计算真正的px值
onLoad: function (options) {
    var padding10 = parseInt(10 / 750 * wx.getSystemInfoSync().windowWidth);
    var padding30 = parseInt(30 / 750 * wx.getSystemInfoSync().windowWidth);

    this.setData({
      padding10: padding10,
      padding30: padding30
    })
},


wxml中去设置
style="padding-left:{{padding10}}px"
style="padding-left:{{padding10 + padding30}}px"
style="padding-left:{{padding10 + 2 * padding30}}px"
style="padding-left:{{padding10 + 3 * padding30}}px"
style="padding-left:{{padding10 + 4 * padding30}}px"

这样算出来的结果就是正确的了，任何机型都ok的。其实这个问题因为是超级细的分割线，如果不是分割线，而是一个有很大宽度的view，我想大部分人也不一定会发现居然有1~2px的距离差。