Vue下拉刷新组件

之前写了上拉加载，当然也就有下拉刷新。下拉刷新在web项目中使用会比上拉加载少。这边补充两点：

1、上拉加载和下拉刷新最大意义是说明原理；

2、全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

下拉刷新原理：

监听touchStart、touchMove、touchEnd，当手指触碰的时候，记录当前位置，然后移动的时候判断，滚动条为0，且移动的距离（当前pageY减去初始触碰的pageY）大于0小于设定的某个值的时候，让加载动画的高度等于移动的距离。移动结束的时候，判断是否大于某个高度，大于就触发刷新方法。

<template>
  <div class="" id="refresh" 
       @touchstart="touchStart($event)" 
       @touchmove="touchMove($event)"
       @touchend="touchEnd($event)">
    <div :style="{'height': loadShowHeight + 'px'}" style="overflow: hidden">
      <slot name="load"></slot>
    </div>
    <slot name="content"></slot>
  </div>
</template>
<script>  
    export default {
      props: ['loadMaxHeight', 'loadMinHeight', 'refresh', 'refreshEnd'],
        data() {
          return {scrollTop: 0, startY: 0, loadShowHeight: 0}
        }, 
        components: {}, mounted() {
          this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        },
        methods: {
          touchStart(e) {
            this.startY = e.targetTouches[0].pageY;
          },
          touchMove(e) {
            if (this.scrollTop == 0) {
              let moveDistance = e.targetTouches[0].pageY - this.startY;
              if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
                  this.loadShowHeight = moveDistance;
              };
            };
          },
          touchEnd() {
            if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
              this.$emit('refresh', false);
            } else {
              this.loadShowHeight = 0;
            };
          },
        }, 
        watch: {
          refreshEnd(val) {
            if (val) {
              this.loadShowHeight = 0;
            };
          }
        }
    }
</script>

使用：

<template>
  <div class="">
    <w-scroll-down loadMaxHeight="80" loadMinHeight="40" @refresh="refresh" :refreshEnd="freshFlag">
      <div slot="load" style="line-height: 30px;color: red"> {{loadMsg}}</div>
      <div slot="content">
        <div style="width: 30px;height: 200px;background: #5fff36"></div>
        <div style="width: 30px;height: 200px;background: #fdff62"></div>
        <div style="width: 30px;height: 200px;background: #ff46a9"></div>
        <div style="width: 30px;height: 200px;background: #ff8938"></div>
        <div style="width: 30px;height: 200px;background: #677eff"></div>
      </div>
    </w-scroll-down>
  </div>
</template>
<script>
    import {wScrollDown} from 'wade-ui'
    export default {
      name: 'HelloWorld',
      data() {
          return {loadMsg: '松开刷新', freshFlag: false}
      },
      methods: {
        refresh(state) {
            this.loadMsg = '刷新中';
            this.freshFlag = state;
            setTimeout(() = > {this.loadMsg = '松开刷新';
            this.freshFlag = true;
        }, 2000);
        }
        },
      components: {wScrollDown}
    }
</script>

随便找一个vue项目跑起来就可以看了，这边发现微信发布的时候代码都乱码了，考下来之后格式化一下。

已经部署到npm包：

https://www.npmjs.com/package/wade-ui

下载：

Npm install wade-ui -S

欢迎关注Coding个人笔记公众号

猜你喜欢