如标题所示,由于微信小程序目前仅支持整体页面刷新及加载,有某些具体特殊需求的页面中是无法满足的,因此有了定制化的局部下拉刷新及上拉加载列表,思路如下:
下拉刷新会有5种状态嘛:
reset: 重置初始状态
pulling: 下拉过程
pullEnough: 下拉距离判断
refreshing: 释放正在刷新
refreshed: 刷新完成
有了这些状态之后,再考虑在微信小程序当中,局部滚动使用
<scroll-view></scroll-view>这个控件呢,需要注意的是初始化得有个高度 height,一般情况下,这个高取自小程序
wx.getSystemInfo(),通过页面减去页面除滚动区域外的高度,剩于高度即可,设置纵向滚动为true,然后,绑定滚动事件,实现
监听纵向页面卷去的高度scrollTop,用于动态修改下拉刷新的状态值,根据状态值,UI层不同展示,下拉刷新的事件需要在scroll-view绑定手指的触摸事件,主要是touchStart, touchMove,获取到初始值,滑动的值,与scrollTop值作对比计算,实现下拉刷新的功能
上拉加载直接就绑定touchEnd即可,在允许上拉加载的情况下