直接上代码，不懂的多看几遍，下面我换会告诉大家如何使用。
<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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue在前端开发中需要注意什么
vue.js怎么做出登录控制功能
以上就是vue2.0移动端做出下拉刷新与上拉加载功能的详细内容。