uni-app scrollview中使用refresh会导致top错误

uni-app scrollview中使用refresh会导致top错误

操作步骤：

  • 上方代码示例

预期结果：

  • 正常定位

实际结果：

  • top被上移

bug描述：

<scroll-view>  
<refresh v-if="true"></refresh>  
<slot></slot>  
</scroll-view>

slot中使用了定位，开启refresh会导致slot中的top定位上移，高度看着就是refresh内容的高度

还有一个问题，一旦使用了refresh 组件，有几率的进入页面refresh 这个组件会空白一块

https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210130/1d2a30473296fa068188fa80a8a0a65d.jpg

https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210130/2d56bea91dd4e763dbdbc4a77af6c891.jpg


更多关于uni-app scrollview中使用refresh会导致top错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app scrollview中使用refresh会导致top错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于refresh组件在scroll-view中的布局特性导致的。refresh组件会占据一定的空间，导致后续slot内容的位置计算出现偏差。

解决方案：

  1. 对于top定位上移的问题：
<scroll-view>
  <refresh v-if="true"></refresh>
  <view class="content-wrapper">
    <slot></slot>
  </view>
</scroll-view>
回到顶部