How to operate vue2.0 mobile terminal to implement pull-down refresh and pull-up loading

This time I will show you how to operate the vue2.0 mobile terminal to implement pull-down refresh and pull-up loading. What are the precautions for operating vue2.0 mobile terminal to implement pull-down refresh and pull-up loading? What are the following? This is a practical case, let’s take a look at it.

Go directly to the code. If you don’t understand, read it a few times. I will tell you how to use it below.

<template lang="html">
 <p class="yo-scroll"
 :class="{&#39;down&#39;:(state===0),&#39;up&#39;:(state==1),refresh:(state===2),touch:touching}"
 @touchstart="touchStart($event)"
 @touchmove="touchMove($event)"
 @touchend="touchEnd($event)"
 @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
  <section class="inner" :style="{ transform: &#39;translate3d(0, &#39; + top + &#39;px, 0)&#39; }">
   <header class="pull-refresh">
    <slot name="pull-refresh">
      <span class="down-tip">下拉更新</span>
      <span class="up-tip">松开更新</span>
      <span class="refresh-tip">更新中</span>
    </slot>
   </header>
   <slot></slot>
   <footer class="load-more">
    <slot name="load-more">
     <span>加载中……</span>
    </slot>
   </footer>
  </section>
 </p>
</template>
<script>
export default {
 props: {
  offset: {
   type: Number,
   default: 40
  },
  enableInfinite: {
   type: Boolean,
   default: true
  },
  enableRefresh: {
   type: Boolean,
   default: true
  },
  onRefresh: {
   type: Function,
   default: undefined,
   required: false
  },
  onInfinite: {
   type: Function,
   default: undefined,
   require: false
  }
 },
 data() {
  return {
   top: 0,
   state: 0,
   startY: 0,
   touching: false,
   infiniteLoading: false
  }
 },
 methods: {
  touchStart(e) {
   this.startY = e.targetTouches[0].pageY
   this.startScroll = this.$el.scrollTop || 0
   this.touching = true
  },
  touchMove(e) {
   if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
    return
   }
   let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
   if (diff > 0) e.preventDefault()
   this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
   if (this.state === 2) { // in refreshing
    return
   }
   if (this.top >= this.offset) {
    this.state = 1
   } else {
    this.state = 0
   }
  },
  touchEnd(e) {
   if (!this.enableRefresh) return
   this.touching = false
   if (this.state === 2) { // in refreshing
    this.state = 2
    this.top = this.offset
    return
   }
   if (this.top >= this.offset) { // do refresh
    this.refresh()
   } else { // cancel refresh
    this.state = 0
    this.top = 0
   }
  },
  refresh() {
   this.state = 2
   this.top = this.offset
   this.onRefresh(this.refreshDone)
  },
  refreshDone() {
   this.state = 0
   this.top = 0
  },
  infinite() {
   this.infiniteLoading = true
   this.onInfinite(this.infiniteDone)
  },
  infiniteDone() {
   this.infiniteLoading = false
  },
  onScroll(e) {
   if (!this.enableInfinite || this.infiniteLoading) {
    return
   }
   let outerHeight = this.$el.clientHeight
   let innerHeight = this.$el.querySelector('.inner').clientHeight
   let scrollTop = this.$el.scrollTop
   let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
   let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
   let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
   if (bottom < infiniteHeight) this.infinite()
  }
 }
}
</script>
<style>
.yo-scroll {
 position: absolute;
 top: 2.5rem;
 right: 0;
 bottom: 0;
 left: 0;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 background-color: #ddd
}
.yo-scroll .inner {
 position: absolute;
 top: -2rem;
 width: 100%;
 transition-duration: 300ms;
}
.yo-scroll .pull-refresh {
 position: relative;
 left: 0;
 top: 0;
 width: 100%;
 height: 2rem;
 display: flex;
 align-items: center;
 justify-content: center;
}
.yo-scroll.touch .inner {
 transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
 display: block;
}
.yo-scroll.up .up-tip {
 display: block;
}
.yo-scroll.refresh .refresh-tip {
 display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
 display: none;
}
.yo-scroll .load-more {
 height: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
} 
</style>

Copy the above component, save it as a component with the suffix .vue and put it under your component, and then introduce it to the page. Here is the code from the demo

I quoted: There is Comments, please leave me a message if you have any questions!

<template>
 <p>
    <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
    <ul>
     <li v-for="(item,index) in listdata" >{{item.name}}</li>
     <li v-for="(item,index) in downdata" >{{item.name}}</li>
    </ul>
  </v-scroll>
 </p>
</template>
<script>
import Scroll from './y-scroll/scroll';
export default{
 data () {
  return {
   counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
   num : 15, // 一次显示多少条
   pageStart : 0, // 开始页数
   pageEnd : 0, // 结束页数
   listdata: [], // 下拉更新数据存放数组
   downdata: [] // 上拉更多的数据存放数组
  }
 },
 mounted : function(){
   this.getList();
 },
 methods: {
  getList(){
    let vm = this;
     vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
          vm.listdata = response.data.slice(0,15);
         }, (response) => {
          console.log('error');
        });
  },
  onRefresh(done) {
       this.getList();
    
       done() // call done
   
  },
  onInfinite(done) {
       let vm = this;
       vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
         vm.counter++;
         vm.pageEnd = vm.num * vm.counter;
         vm.pageStart = vm.pageEnd - vm.num;
         let arr = response.data;
           let i = vm.pageStart;
           let end = vm.pageEnd;
           for(; i<end; i++){
            let obj ={};
            obj["name"] = arr[i].name;
            vm.downdata.push(obj);
             if((i + 1) >= response.data.length){
             this.$el.querySelector('.load-more').style.display = 'none';
             return;
            }
            }
         done() // call done
          }, (response) => {
          console.log('error');
        });
      }
 },
 components : {
'v-scroll': Scroll
 }
}
</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use JS to obtain the absolute position of DOM elements

What are the specifications for Vue front-end development

The above is the detailed content of How to operate vue2.0 mobile terminal to implement pull-down refresh and pull-up loading. For more information, please follow other related articles on the PHP Chinese website!