同样的rpx在ip7plus的模拟器和真机换算的px不同
发布于 6 年前 作者 na03 4417 次浏览 来自 问答

我想反馈一个 Bug

ios版本10.3.2

如果是 Bug:

* Bug 表现是什么?预期表现是什么?

我将一个scroll-view设定了height,height为一个变量

<scroll-view scroll-y class='entertain-list' scroll-y="true"  bindscrolltolower="lowerLoad" scroll-top="{{scroll-top}}" style='height:{{listHeight}}' enable-back-to-top='true'>

listHeight通过wx.getSystemInfoSync()来获取信息,具体代码如下

var info = wx.getSystemInfoSync();
 
var screenHeight = info.screenHeight;
 
var __listHeight = (screenHeight * 2) - 96 - 40;
 
console.log("__listHeight : " + __listHeight);
 
this.setData({
 
"listHeight": __listHeight + "rpx"
 
});

结果在模拟器的ip7plus中输出listHeight是1336,之后在xml中显示height:570px

<scroll-viewscroll-top="0"enable-back-to-top=""scroll-y=""class="entertain-list"style="height:570px">

但是到了ip7plus的真机上,同样listHeight输出数据还是1336,之后在真机的xml中显示的style的height赋值是737px。

这个问题导致在真机中的scroll-view设置高度不对,超过了屏幕的底边,底部的元素会部分在屏幕下方不可见区域停留,无法滚动上来显示。

* 如何复现?

设定一个scroll-view,设置style的height为一个数值,之后查看模拟器和真机中xml中的数据如何展示

* 提供一个最简复现 Demo

xml代码如下

<scroll-view scroll-y class='entertain-list' scroll-y="true"  bindscrolltolower="lowerLoad" scroll-top="{{scroll-top}}" style='height:{{listHeight}}' enable-back-to-top='true'>
</scroll-view >

在js的onload事件中放入如下代码

var screenHeight = info.screenHeight;
  
var __listHeight = (screenHeight * 2) - 96 - 40;
  
console.log("__listHeight : " + __listHeight);
  
this.setData({
  
"listHeight": __listHeight + "rpx"
  
});

查看生成的xml中的style=‘height:???’

???处的信息

2 回复

没有解决,目前勉强用 height:100vh 这样的方式去做,里面的布局再利用padding,margin去调整

楼主解决的吗?我也遇到了

回到顶部