内容详情参见github
官方scroll-view组件不支持下拉刷新,只有滚到顶部刷新的机制,所以做一个基于scroll-view的下拉刷新组件。
npm i wepy-scroll-view-refresh --save-dev
1、该组件外面必须套用scroll-y的scroll-view(暂时不支持横向滚动)
2、scroll-view必须使用scroll事件实时向该组件传递一个scrollTop(scroll-view的scrollTop)参数
3、内容区域用卡槽slot="refresh-content"部分填充
4、组件刷新会触发refresh事件,父页面需要在events内接收一个refresh的事件
5、重置刷新组件调用this.$invoke('refresh', 'reset')方法
// index.wpy
<template>
<view class="kai-content">
<scroll-view scroll-y="{{true}}" class="refresh-scroll__container" scroll-with-animation="{{true}}" bindscrolltolower="lower" style="width: 100vw;height:100vh;" catchscroll="scroll">
<view style="width:100%;height:100%;">
<refresh :scrollTop.sync="scrollTop">
<view slot="refresh-content" style="margin-top:45px;">
<repeat for="{{[0,1,2,3,4,5,6,7,8,9,10]}}" index="i" item="item" key="new-{{i}}">
<view class="new-block">
{{i}}
</view>
</repeat>
</view>
</refresh>
</view>
</scroll-view>
</view>
</template>
<script>
import wepy from 'wepy'
import Refresh from 'wepy-scroll-view-refresh'
export default class ScrollViewRefresh extends wepy.page {
components = {
refresh: Refresh
}
data = {
scrollTop: 0
}
methods = {
lower (index) {
console.log(index)
},
scroll (e) {
this.scrollTop = e.detail.scrollTop
this.$apply()
}
}
events = {
'refresh': (data) => {
setTimeout(() => {
this.$invoke('refresh', 'reset')
}, 3000)
}
}
}
</script>
this.$invoke('refresh', 'reset')
参考原版插件。
4 个评论
很棒
ios上会触发橡皮筋效果,发生抖动
可能和ios的弹性滚动有关系,目前没有好的解决方案
可以判断在开始滚动之前将scroll-view的scroll-y设为false 禁用滚动,刷新完成后继续滚动
有没有原生实现的Demo啊?项目没有用框架....
直接把逻辑代码拷贝到你的项目就好了
感恩,项目中已使用。