微信小程序的下拉刷新默认是自动弹回的,不需要额外的代码实现。当用户下拉刷新后,页面会自动滑动到顶部,然后刷新数据,刷新完成后会自动回弹到原来的位置。

如果你想手动控制下拉刷新的回弹效果,可以使用小程序的'scroll-view'组件。在'scroll-view'组件中,可以通过设置'scroll-top'属性来控制滚动位置。当下拉刷新完成后,设置'scroll-top'为0即可让页面自动回弹到顶部。具体代码如下:

<scroll-view scroll-y='true' bindscrolltolower='onScrollToLower' bindscrolltoupper='onScrollToUpper' scroll-top='{{scrollTop}}'>
  <!-- 列表内容 -->
</scroll-view>

data: {
  scrollTop: 0
},

onScrollToUpper: function () {
  // 下拉刷新逻辑
  // 刷新完成后,设置scrollTop为0,让页面自动回弹到顶部
  this.setData({
    scrollTop: 0
  })
}
微信小程序下拉刷新自动弹回原理及手动控制方法

原文地址: https://www.cveoy.top/t/topic/mrsp 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录