VwpEYrN

index.html

<div id="app">
  <div :style="{position: !distance ? 'absolute' : 'initial', height:distance + 'px'}" class="pull_refresh d-flex ai-center jc-center">
    <p class="text-center text-gray p-2 text" v-if="pullStatus !==2">{{pullTexts[pullStatus]}}</p>
    <van-loading size="24px" v-else>{{pullTexts[pullStatus]}}</van-loading>
  </div>
  <div class="home p-2" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove"></div>
</div>

script.js

new Vue({
  data() {
    return {
      startPosition: 0, // Touch the start position
      endPosition: 0,  // Touch end position
      distance: 0, // pull down the distance
      pullStatus: 0, // 0 pull it to refresh 1 Relat to refresh 2 loading 3 loading
      pullTexts: ["Dress pull, you can refresh it ~", "Recruitment ~", "Loading...", "Load is complete"],
    };
  },
  methods: {
    /**
    * @see sliding start event
    */
    touchStart(e) {
      this.startPosition = e.touches[0].pageY;
    },
    /**
    * @see sliding event
    */
    touchMove(e) {
      // Get the position of the current scroll bar
      const scrollTop =
            document.documentElement.scrollTop || document.body.scrollTop;
      // The scroll bar is determined as a drop-down while at the top.
      if (scrollTop < 1) {
        // Get the difference in starting and ending position
        let distance = e.touches[0].pageY - this.startPosition;
        // difference greater than 0 represents from top to fall, only allow operation
        if (distance > 0) {
          // Prevent the default event, extremely important, unpailed, some browser pages cannot slide OR slide or .... You can use the mobile WeChat browser test effect.
          e.preventDefault();
          // Judgment moving one distance, more than this distance is loosen to perform refresh operations
          if (distance > 70) {
            if (distance !== 70) {
              // Change the status, set the maximum distance of the drop
              this.pullStatus = 1;
              this.distance = 70;
            }
          } else {
            // Assign the calculated difference to move the page downward
            this.pullStatus = 0;
            this.distance = distance;
          }
        }
      }
    },
    /**
    * @see sliding end event
    */
    touchEnd(e) {
      const scrollTop =
            document.documentElement.scrollTop || document.body.scrollTop;
      // At the end, it is necessary to judge the distance from the state and the drop, which meets the requirements to perform the drop-down operation.
      if (scrollTop <= 1 && this.distance >= 70) {
        this.pullStatus = 2;
        // Timer Simulation Call Interface Refresh Page
        setTimeout(() => {
          // Refresh success
          this.distance = 0;
          this.pullStatus = 3;
        }, 3000);
      }
    },
  },
}).$mount('#app');

scripts

<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

style.css

.home {
  height: 100px;
  width: 100%;
  background: red;
}

styles

<link href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" rel="stylesheet" />

vwpeyrn.markdown

VwpEYrN

A Pen by Edward Lance Lorilla on CodePen.

License.