Vue下拉重新整理元件

wade3po發表於2019-02-02
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包：

www.npmjs.com/package/wad…

下載：

Npm install wade-ui -S

歡迎關注Coding個人筆記 公眾號

相關文章