这次给大家带来移动端怎样做出上拉下滑刷新加载，移动端做出上拉下滑刷新加载的注意事项有哪些，下面就是实战案例，一起来看一下。
直接上代码，不懂的多看几遍，下面我换会告诉大家如何使用。
<template lang="html"> <p 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> </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>
把上面组件拷贝一下，存成后缀是.vue的组件放到你的component下，  然后引入到页面 , 下面是我引用的demo
上代码： 里面有注释哦，有问题给我留言！
<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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
使用beforeenter钩子函数（附代码）
怎样使用js操作图片转为base64
以上就是移动端怎样做出上拉下滑刷新加载的详细内容。