微信小程序下拉刷新自动弹回原理及手动控制方法
微信小程序的下拉刷新默认是自动弹回的,不需要额外的代码实现。当用户下拉刷新后,页面会自动滑动到顶部,然后刷新数据,刷新完成后会自动回弹到原来的位置。
如果你想手动控制下拉刷新的回弹效果,可以使用小程序的'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 著作权归作者所有。请勿转载和采集!