開發(fā)者工具:

電腦打開小程序:

如圖所示, 分類頁面樣式3的時候, 商品  鈣果菊粉禮盒裝下 應(yīng)該還有一個商品,但開發(fā)者工具上只能顯示個頭,電腦端打開直接就沒有這個商品了,iOS手機打開也是顯示一半,安卓倒是都能顯示全

后來調(diào)整了下好像是改好了,但不確定是否正確,在此發(fā)一下可以給同樣遇到此問題的同志們參考下:

外層的 原 :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;

   // 通常設(shè)計稿寬度為750px，所以將750作為基準(zhǔn)轉(zhuǎn)換比例

   const baseWidth = 750;

   // 計算比例

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

   // 進行轉(zhuǎn)換

   return rpx * scale;

},

兩個方法. 我這樣修改后測試各機型好像都可以了,有更好的修改辦法歡迎留言