微信小程序-iOS系統下拉或者拖動整個頁面出現白底問題

    近期開發微信小程序，遇到這麼一個問題，在安卓真機上調試，下拉並不會有留白bug，而在ios上調試，bug出現了，求知網上才知道並不是我一個人會存在此問題，針對ios有統一的解決辦法，但，我總結了以下兩點；

方法一：

page.json:  給page單獨設置屬性，"disableScroll":true ；解析：設置爲 true 則頁面整體不能上下滾動；只在 page.json 中有效，無法在 app.json 中設置該項；

{
    "disableScroll": true,
    "enablePullDownRefresh": false
}

 

“買家秀”發言：確實可行，但是針對需要滾動條展示的長條頁，這並不友好；

ps：如果遇到設置了disableScroll":true，但在ios上調試還是出現滾動，怎麼辦？你們可以嘗試在page.json中同時加上"enablePullDownRefresh":false 屬性，如果再不行，跟我一樣求助於其他人吧，別放棄，總有一種辦法適合解決該問題。

方法二：

page.wxss：給page 最外層用scroll-view包裹上；

<scroll-view scroll-y style="height:{{wh}}px;" bindscrolltolower="onBottom"> 

//...

</scroll-view>

js：當下拉到最底時觸發該onBottom() 方法,獲得設備可用屏幕高度；

onBottom: function() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          "wh": res.windowHeight
        })
        console.log("wh", that.data.wh);
      }
    })
  },

/**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function (options) {
      var that = this;
       wx.getSystemInfo({
      success: function(res) {
        that.setData({
          "wh": res.windowHeight
        })
        console.log("wh", that.data.wh);
      }
    })
}

“買家秀”發言：確由於列表頁展示必定有滾動條滑動，方法二不僅解決了在ios 真機調試上的底部留白bug，也順便支持滾動條的上下滑動，ok！解決我的問題；

ps：當時我還有遇到當在wxml設置style:"height:{{wh}}px"時，onBottom方法沒有觸發，爲此，頭疼的我嘗試了，爲這個scroll-view以及page的高度都設置爲100%，style:"height:100%"；順利解決了此標題問題；

或者有文章說將此獲取屏幕可用高度定義在onLoad() 中，嘗試下？但是對我是嘗試失敗了；O(∩_∩)O哈哈~

結論：顯然方法二承載適配度大於方法一，建議使用方法二，僅僅針對單頁無需有滾動條滑動，則直接方法一省心；各自取捨，自己定奪；

❤如果文章對您有所幫助，就在文章的右上角或者文章的末尾點個贊吧！(づ￣ 3￣)づ

❤如果喜歡大白兔分享的文章，就給大白兔點個關注吧！(๑′ᴗ‵๑)づ╭❤～

❤對文章有任何問題歡迎小夥伴們下方留言或者入羣探討【羣號：708072830】

❤鑑於個人經驗有限，所有觀點及技術研點，如有異議，請直接回復討論（請勿發表攻擊言論）。