uni-app H5下拉刷新圆圈偏移

uni-app H5下拉刷新圆圈偏移

开发环境 版本号 项目创建方式
Windows 10 企业版 LTSC HBuilderX

产品分类：uniapp/H5

示例代码：

<div class="app">  
  <div id="app"></div>  
</div>

body {  
  background-color: rgb(180, 180, 180);  
}

.app {  
  max-width: 400px;  
  margin: auto;  
}

{
  "globalStyle": {  
    "rpxCalcMaxDeviceWidth": 752,  
    "rpxCalcBaseDeviceWidth": 400,  
    "rpxCalcIncludeWidth": 752,  
    "navigationStyle": "custom",  
    "navigationBarTextStyle": "black",  
    "navigationBarTitleText": "测试",  
    "navigationBarBackgroundColor": "#F8F8F8",  
    "backgroundColor": "#F8F8F8",  
    "enablePullDownRefresh": true  
  }
}

操作步骤： 已在代码中给出

预期结果： 下拉刷新圆圈应该居中显示

实际结果： 下拉刷新圆圈的宽度为页面宽度100%，#app位置偏移缩放后，下拉刷新圆圈会偏移

bug描述： 用h5模版去自定义#app的位置的时候，会出现下拉刷新圆圈错位的问题，希望可以修改一下uni-page-refresh下拉刷新圆圈的定位逻辑。

出现此问题的原因是 【uni-page-refresh】元素的父节点没有设置position。

临时解决办法为 App.vue设置 在style中增加

uni-page{  
  position: relative;  
}

更多关于uni-app H5下拉刷新圆圈偏移的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app H5下拉刷新圆圈偏移的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的H5平台下拉刷新定位问题。当自定义#app容器的位置或尺寸时，uni-page-refresh组件（下拉刷新圆圈）的定位基准会出错。

问题根源： uni-page-refresh组件默认使用绝对定位，但在H5平台下，其定位参考的包含块（containing block）可能不是预期的uni-page元素，导致在页面布局变化时出现偏移。

解决方案：

  1. 官方推荐方案（已验证有效）： 在App.vue的style中添加：

    uni-page {
  position: relative;
}

    这确保了uni-page-refresh以uni-page为定位基准，使其能正确跟随页面布局。

  2. 备选方案： 如果上述方法不生效，可以尝试更具体的CSS规则：

    .uni-page-head, .uni-page-body {
  position: relative;
}
回到顶部