基于Vue手写一个下拉刷新

当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具体看源码即可。

思路

  1. touchstart 记录开始位置
  2. touchmove 判断上拉、下拉(暂时只用到了下拉)
  3. touchend 根据下拉、上拉位置判断是否达到下拉刷新、上拉加载更多
  4. @scroll.passive="onScrollFn($event)" 记录屏幕滚动,用来处理上滑时header rgba控制(沿用早期效果)
  5. touchmove 会触发onPulling,控制下拉时header opacity(参考目前淘宝效果)
  6. 正在刷新时触发refresh,此时有一个回弹效果
  7. 刷新完不管成功失败都有一个回调 refreshFinsh,作用是有时候没有拉到刷新区域页面回弹之后,相关的透明度可能无法还原

props

  1. offset 默认下拉高度
  2. bounce 回弹高度 offset - bounce
  3. maxScrollerHeight 最大下拉高度
  4. enableRefresh 是否开启刷新
  5. onRefresh 达到刷新条件调用的方法
  6. refreshFinsh 刷新完成后回调
  7. onScroll 向上滑动中回调
  8. onPulling 向下 下拉刷新中回调
  9. frequency 频率控制
  10. power 滑动和下拉的像素比例(使之更易拉动)

使用示例

<scroller
    :on-refresh="refresh"
    :offset="100"
    :bounce="80"
    :maxScrollerHeight="130"
    :power="1.5"
    @refreshFinsh="refreshFinsh"
    @onScroll="onScroll"
    @onPulling="onPulling"
>
<template slot="pull-refresh">
    <!-- <span class="down-tip">下拉刷新</span>
    <span class="up-tip">松开刷新</span>
    <span class="refresh-tip">加载中..</span> -->
</template>
<div class="c-view-content">......</div>
</scroller>

使用案例

  1. 源码参考地址 传送门
  2. demo参考地址 传送门

注意事项

  1. ios touchmove移出屏幕可能不会触发touchend,可用touchcancel
  2. ios最外层容器默认是可以滚动的,未达到刷新条件的时候需要e.preventDefault()

存在问题

  1. 添加频率限制后,出现滑动完需等待一会才能继续滑动,这里的滑动未区分普通滑动/下拉/上拉
  2. 上拉加载更多TODO
  3. touchmove 没有使用节流函数
全部为原创文章,转载请注明。
个人站点helijun.com.cn,欢迎指导交流....

posted @ 2018-12-28 17:08  微人类  阅读(1005)  评论(0编辑  收藏  举报