vue2.0 移动端实现下拉刷新和上拉加载更多的示例

本人正在基于 vue2.0 + webpack + es6 搭建前端架构，整理了部分插件，下面这个是下拉更新 上拉更多的，挺好用的，分享给大家。

直接上代码，不懂的多看几遍，下面我换会告诉大家如何使用。

<template lang="html">
 <div class="yo-scroll"
 :class="{'down':(state===0),'up':(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: 'translate3d(0, ' + top + 'px, 0)' }">
   <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>
 </div>
</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>

把上面组件拷贝一下，存成后缀是.vue的组件放到你的component下，  然后引入到页面 , 下面是我引用的demo

上代码： 里面有注释哦，有问题给我留言！

<template>
 <div>
    <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>
 </div>
</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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。