(on)touchstart：触摸开始的时候触发
(on)touchmove：手指在屏幕上滑动的时候触发
(on)touchend：触摸结束的时候触发
(on)touchcancel：系统取消touch事件的时候触发。例如电话接入或者弹出信息。一般用在游戏：玩着的时候，突然来电话了，就触发touchcancel事件暂停游戏、存档等操作。
那，在这里，小编主要用到了touchstart,touchmove和touchend这三个事件，分别用来捕获用户的触屏行为：
在touchmove里面，大家要注意，由于微信中的webview会存在黑底的问题，因此我们拉动列表的时候，会出现露出微信上方黑底的问题，因此，我们需要调用preventDefault方法，防止事件继续向上冒泡，从而防止用户在拖动列表的时候，微信上方出现黑底，那样会十分影响体验。
那接下来，我们需要做的就是把这些触摸事件绑定到滚动条上就行了：
那么，我们的下拉刷新的主要逻辑也就完成了
当然这里，我们也需要提供灵活的方式，能够动态的去绑定和解绑下拉刷新和滚动刷新的方法
最后，因为我们的控件没办法知道我们的数据已经加载完，因此我们需要提供一个方法，由外部的数据刷新方法调用结束后，通知我们的组件，数据已经加载完，并且重新渲染下拉处或者底部处的样式：
我们在组件中，也建议在vue的nextClick中对该方法进行调用：
这样，一个基本的下拉刷新和滚动刷新的指令也就实现了.
以上所述是小编给大家介绍的基于vue的下拉刷新指令和滚动刷新指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: