微信小程序-iOS系统下拉或者拖动整个页面出现白底问题

╰+哭是因爲堅強的太久メ 2023-07-15 13:52 8阅读 0赞

近期开发微信小程序，遇到这么一个问题，在安卓真机上调试，下拉并不会有留白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】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。