258资源分享网

前几天分享了一个自己做的关于小程序组件扩展的开源项目（传送门） 
本来就是想给自己发布的第一个开源代码骗骗star，结果有不少善良的朋友给文章点赞了，搞得我有点不好意思，所以决定写点干货讲讲具体是怎么实现的。 
其实也比较简单，首先自定义组件下的 scroll-view 高度设为比组件本身高出 40px，即头部显示刷新文字的区域高度，然后让 scroll-view y轴偏移 -40px，这样刷新文字区域就在顶部看不到了，具体css如下：

.scroll-view {

height: calc(100% + 40px);

transform: translateY(-40px);

}

然后就是监听 scroll-view 的 onscroll 事件，这里我将下拉刷新的状态分为五种：

//这段偷懒没写在代码里，直接用的数字

const _pullDownStatusDic = {

invisiable: 0, //看不见

pulling: 1, //下拉时

release: 2, //可松开刷新时

refresing: 3, //正在刷新

finish: 4, //刷新完成

}

那么在事件监听中根据当前的 scrollTop 来判断应该在哪一种状态：

//height就是预设的下拉至多少高度时刷新

if (scrollTop < -1 * height) {

targetStatus = 2;

} else if (scrollTop < 0) {

targetStatus = 1;

} else {

targetStatus = 0;

}

问题来了，什么时候刷新呢？小程序的 scroll-view 并没有 onscrollend 这种事件，于是我想到了 ontouchend，毕竟在手机上也只能用触摸来滑动（点击头部返回顶部除外），所以只需要在 ontouchend 事件中监听如果当前的下拉状态是2（_pullDownStatusDic.release）即松开可刷新时，就触发刷新：

if (status === 2) {

this.setData({

pullDownStatus: 3,

})

this.properties.refreshing = true,

this.triggerEvent('pulldownrefresh');

}

当然这个时候还有个问题，我们需要把刷新文字局域显示出来，我们是没办法吧一个 scroll-view 的 scrollTop 设为负数的，所以只能将 scroll-view 的y轴偏移取消来解决（产生的问题就是松手时会有一下弹动，后期会想办法进行优化）  完成刷新后，再将 scroll-view 的y轴偏移通过css动画再变回 -40px（用 translate 而不用 margin 就是为了此处动画的流畅度），这样就完成了一次下拉刷新。

是不是很简单：）  另外还有一些小细节，还有加载更多，还有 xing-image 的一些实现，就更简单了，有兴趣的可以看看源码