1***@qq.com
1***@qq.com
  • 发布:2021-08-20 18:52
  • 更新:2021-08-20 18:52
  • 阅读:458

【报Bug】H5下拉刷新圆圈偏移

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 企业版 LTSC

HBuilderX类型: 正式

HBuilderX版本号: 3.2.2

浏览器平台: Chrome

浏览器版本: 360极速浏览器

项目创建方式: HBuilderX

示例代码:

template.h5.html设置

    <div class="app">  
      <div id="app"></div>  
    </div>
      body {  
        background-color: rgb(180, 180, 180);  
      }  

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

pages.json设置

  "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;  
}
2021-08-20 18:52 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复