微信小程序-解决iOS系统下拉或者拖动整个页面出现白底问题【亲测有效】

已于 2022-04-23 20:33:16 修改
阅读量1.1w 收藏 15
点赞数 6
分类专栏： 微信小程序实战 文章标签： 微信小程序 微信小程序遇到ios下拉留白
于 2020-03-17 14:36:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43970743/article/details/104920815
版权
在开发微信小程序时，作者发现了一个只在iOS系统中出现的下拉留白bug。文中提供了两种亲测有效的解决方案：1. 在page.json中设置disableScroll = true，但可能不适用于需要滚动条的页面；2. 使用scroll-view包裹page，并添加触底函数，支持滚动条且能解决留白问题。作者推荐使用方法二，适用于更广泛的场景。
摘要由CSDN通过智能技术生成

👨‍🎓作者：bug菌

✏️博客：CSDN、掘金等

💌公众号：猿圈奇妙屋

🚫特别声明：原创不易，转载请附上原文出处链接和本文声明，谢谢配合。

🙏版权声明：文章里可能部分文字或者图片来源于互联网或者百度百科，如有侵权请联系bug菌处理。

一、前言🔥

        近期在开发微信小程序时，遇到这么一个问题，在安卓真机上调试，下拉并不会有留白bug，但在上ios真机上调试，bug却出现了，求知网上才知道并不是我一个人会存在此问题，针对ios系统有统一的解决办法，但，我总结了以下两点，解决此留白问题。</

了解本专栏 订阅专栏 解锁全文 超级会员免费看
bug菌¹
关注
专栏目录
订阅专栏
微信小程序-ios系统-下拉上拉出现白色，如何处理呢？
03-29
这几天做小程序，有些页面都是全屏的背景，在安卓上背景是固定的，而在ios上上拉下拉出现白色，测试说体验不太好，一开始我以为是下拉上拉刷新造成的，关闭了依然是这样。为了体验好点，可以按一下解决： 方式一： 　　可以在page.json文件内配置 ："backgroundColor": "#ccc" 属性，这个方法比较便捷。但是对于一些全屏背景的页面体验还不是很好 方式二： 　　对于一些全屏背景页面，我们可以让背景固定这样体验会好点，可以按以下进行操作： 　　1》page.json设置 "disableScroll":true ； 表示：设置为 true 则页面整体不能上下滚动；只在 page.j
微信小程序iOS下拉白屏晃动问题解决方案
10-16
主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序禁止ios自带的下拉
最新发布
到点睡觉了的博客
07-08 506
解决办法： 1.在index.json中添加"disableScroll": true
微信小程序scroll-view去除IOS下拉留白
weixin_44889983的博客
12-07 807
【代码】微信小程序scroll-view去除IOS下拉留白。
去除uniapp微信小程序顶底部滑动留白
zcc88999的博客
04-01 650
去除uniapp微信小程序顶底部滑动留白
苹果小程序上下拉出现留白情况
xiaokangna的博客
04-15 3090
苹果小程序上下拉出现留白情况 今天做小程序测试发现一个bug，小程序上下拉的时候会出现留白底的情况，或者是红底的情况，安卓机不会出现这种情况 解决方法分多种 1、第一种，如果你只是需要解决他颜色的问题，可以直接将其设置成跟你小程序背景色一样就可以了 2、第二种就是你需要用到获取滚动值，需要获取滚动多少百分比的时候，就会导致他距离超出，百分比会超过100%，目前我的解决方法就是判断他如果等于100或者大于100，那就等于100，下拉也是，判断小于0或者等于0，那就是0，这个属性苹果的一个自带的bug，目前还
微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况
热门推荐
贪嘴的博客
03-10 3万+
项目需要做了一个图片拖动指定组件上删除，和排序的功能android测试正常， ios会出现拖动图片页面也跟着下滑的尴尬情况。 查文档下拉刷新配置默认是关闭的，后经查找文档发现在本页面page.json 配置项可通过 { "disableScroll":true } 来禁用页面下拉滚动 不可在全局配置 app.json中配置 disableScroll 设置为 true 则页面整...
小程序下拉有白色底的问题
weixin_35795555的博客
07-11 1069
下来的时候，出现的白色背景，有两部分的颜色。 下面图是，我们把小程序页面下来的时候会出现的多余两个背景颜色。 一个是每个页面的page设置的颜色，在css上设置。 page { background-color: yellow; 一个是定义页面的pages.json上设置。 { "path": "pages/index/index", "style": { // 有三个背景颜色设置方式，backgroundColor、backgroundColorBottom、backgrou
微信小程序-ios系统-弹簧回弹效果，下拉上拉出现白色，如何处理呢？
小天空的博客
12-24 4816
这几天做小程序，有些页面都是全屏的背景，在安卓上背景是固定的，而在ios上上拉下拉出现白色，测试说体验不太好，一开始我以为是下拉上拉刷新造成的，关闭了依然是这样。为了体验好点，可以按一下解决： 方式一： 　　可以在page.json文件内配置 ："backgroundColor": "#ccc" 属性，这个方法比较便捷。但是对于一些全屏背景的页面体验还不是很好 方式二： 　　对于一些全屏背景页面，我们可以让背景固定这样体验会好点，可以按以下进行操作： 　　1》page.json设置"disabl.
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
01-04
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
微信小程序源码-iOS计算器.zip
03-28
iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-iOS计算器.zip微信小程序源码-...
微信小程序 - IOS 仿饿了么＂我的＂,下拉橡皮筋效果
03-29
* 效果见 饿了么送餐服务 "我的" 页面 IOS环境 上下拖动 * * 下拉时, 顶部色块拉伸,上划时,顶部色块收缩. * wxml :   <view style='background-color: #0000ff;min-height:50vh;z-index:-1;height:{{elastic_...
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发...通过深入研究和实践这些DEMO，开发者不仅能掌握微信小程序的基本开发技能，还能提升解决问题和创新设计的能力。对于希望进入微信小程序开发领域的初学者来说，这是一个很好的起点。
iphone 微信小程序 滚动条拖拽问题
weixin_40543880的博客
03-06 184
iphone 微信小程序 滚动条拖拽问题
小程序下拉刷新ios回弹问题-onPullDownRefresh
懒鬼不能懒的博客
04-11 2709
记录一个小程序的踩坑实录。 事情是这样的，业务上需要加一个下拉刷新的功能，我看了我们项目中之前有人做过，直接第一步，cv一下我就也加上去了。加上去后感觉也没什么调一调api的事情。 onPullDownRefresh: function () { this.setData({ pageNum: 1, theEnd:false }, () => { this.getList() }) }, 谁知……到测试的时候我们测试跟我说这边有问题
小程序 苹果 ios解决下拉出现黑色背景
晴天有何特别
09-12 6445
小程序 苹果 ios解决下拉出现黑色背景 解决方法1 在page.json中配置该页面配置的背景色，修改成页面中的背景色 优点：页面任然可以使用下拉刷新功能"enablePullDownRefresh": true, 不足：，任然可以下拉，但是看起来不会颜色冲突别扭 { "path" : "pages/main/preson/preson", "st...
小程序 自定义navigationBar的背景颜色
xx2410653967的博客
12-21 744
看需求： 小程序导航栏要求该背景，不是换个颜色就能改变的
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bug菌¹

你的鼓励将是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值