开源版,商品分类样式3,开发者工具与电脑端显示不全

开发者工具:

电脑打开小程序:

如图所示, 分类页面样式3的时候, 商品  钙果菊粉礼盒装下 应该还有一个商品,但开发者工具上只能显示个头,电脑端打开直接就没有这个商品了,iOS手机打开也是显示一半,安卓倒是都能显示全

后来调整了下好像是改好了,但不确定是否正确,在此发一下可以给同样遇到此问题的同志们参考下:

外层的 原 :style="{ height: scrollHeight*2 + 'rpx' }" 改成 :style="{ height: pxToRpx(scrollHeight) + 'rpx' }"  其最外层的class 为 wrapper 的 同样增加这个 style

mounted  中原  this.scrollHeight = windowHeight - 80 - sysHeight;  可以修改成  

let yy1 = that.rpxToPx(128);  //搜索框高度

let yy2 = that.rpxToPx(100); //二级分类高度

let yy3 = that.rpxToPx(100); //底部高度

this.scrollHeight = windowHeight - yy1 - yy2 - yy3;

methods  中增加:

pxToRpx(px) {

const screenWidth = uni.getSystemInfoSync().windowWidth;

return (750 * Number.parseInt(px)) / screenWidth;

},

rpxToPx(rpx) {

   // 获取屏幕宽度

  const screenWidth = uni.getSystemInfoSync().windowWidth;

   // 通常设计稿宽度为750px，所以将750作为基准转换比例

   const baseWidth = 750;

   // 计算比例

    const scale = Number(screenWidth) / Number(baseWidth);

   // 进行转换

   return rpx * scale;

},

两个方法. 我这样修改后测试各机型好像都可以了,有更好的修改办法欢迎留言