uni-app 快手小程序页面设置 enablePullDownRefresh 为 true 后真机页面整体下移头部和底部布局错误

uni-app 快手小程序页面设置 enablePullDownRefresh 为 true 后真机页面整体下移头部和底部布局错误

示例代码：

{  
    "path": "pages/color-ui-demo/index/index",  
    "style": {  
        "navigationBarTitleText": "",  
        "enablePullDownRefresh": false  
    }  
}

操作步骤：

快手小程序，页面设置"enablePullDownRefresh": true后，开发者工具显示正常，真机上，页面整体向下移，头部和底部布局错误，如图

预期结果：

快手小程序，页面设置"enablePullDownRefresh": true后，页面正常显示

实际结果：

快手小程序，页面设置"enablePullDownRefresh": true后，开发者工具显示正常，真机上，页面整体向下移，头部和底部布局错误，如图

bug描述：

【快手小程序】，页面设置"enablePullDownRefresh": true后，开发者工具显示正常，如附件1
真机上，页面整体向下移，头部和底部布局错误，如附件2

image image

信息类别 详细信息
产品分类 uniapp/小程序/抖音
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 macOS Big Sur 版本11.1
HBuilderX类型 正式
HBuilderX版本号 3.2.3
第三方开发者工具版本号 1.6.0-ca38a13
项目创建方式 HBuilderX

更多关于uni-app 快手小程序页面设置 enablePullDownRefresh 为 true 后真机页面整体下移头部和底部布局错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

直接使用快手小程序（不使用 uni-app）测试一下，如果仍然存在，反馈到快手小程序社区。

更多关于uni-app 快手小程序页面设置 enablePullDownRefresh 为 true 后真机页面整体下移头部和底部布局错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也遇到这个问题了，请问你如何解决的？

这是一个已知的快手小程序平台兼容性问题。当页面启用下拉刷新（enablePullDownRefresh: true）时，真机上的页面布局会出现偏移。

解决方案：

  1. 使用CSS修复：在页面的根元素或全局样式中添加以下样式：
page {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
}

  1. 检查页面结构：确保页面最外层容器没有设置固定的padding-top或margin-top，这些样式可能与下拉刷新区域冲突。

  2. 使用条件编译：针对快手小程序单独处理：

/* #ifdef MP-KUAISHOU */
page {
  overflow: hidden;
}
/* #endif */
回到顶部