一、安装Node.js使用NPM
首要初始化NPM用到的配置文件package.json(这个文件用来管理我们使用组件包)
二、首先在命令行进行npm||cnpm下载
npm install vue-scroller -D
-D:就是 --save -dev
然后在你想要用scrolle的那个页面里将咱们刚才下载的东西引入
效果：
代码格式：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>v-for</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script src="./vue-scroller.min.js"></script> <style> html, body { margin: 0; } * { box-sizing: border-box; } .row { width: 100%; height: 50px; padding: 10px 0; font-size: 16px; line-height: 30px; text-align: center; color: #444; background-color: #fff; } .grey-bg { background-color: #eee; } .header { position: fixed; top: 0; left: 0; height: 44px; width: 100%; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); background-color: #fff; z-index: 1000; color: #666; } .header > .title { font-size: 16px; line-height: 44px; text-align: center; margin: 0 auto; } </style> </head> <body> <div id="app"> <div class="header"> <h1 class="title">Refresh & Infinite</h1> </div> <scroller :on-refresh="refresh" :on-infinite="infinite" style="padding-top: 44px;"> <div v-for="(item, index) in items" class="row" :class="{'grey-bg': index % 2 == 0}"> {{ item }} </div> </scroller> </div> <script> new Vue({ el: '#app', data: { items: [] }, mounted: function () { for (var i = 1; i <= 20; i++) { this.items.push(i + ' - keep walking, be 2 with you.'); } this.top = 1; this.bottom = 20; }, methods: { refresh: function (done) { var self = this setTimeout(function () { var start = self.top - 1 for (var i = start; i > start - 10; i--) { self.items.splice(0, 0, i + ' - keep walking, be 2 with you.'); } self.top = self.top - 10; done(); }, 1500) }, infinite: function (done) { var self = this setTimeout(function () { var start = self.bottom + 1; for (var i = start; i < start + 10; i++) { self.items.push(i + ' - keep walking, be 2 with you.'); } self.bottom = self.bottom + 10; done(); }, 1500) } } }); </script> </body> </html>
vue-scroller.min.js：
/*! * Vue Scroller * version: 2.2.4 * repo: https://github.com/wangdahoo/vue-scroller * build: 2017-09-21 16:25:35 */ !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("VueScroller",[],e):"object"==typeof exports?exports.VueScroller=e():t.VueScroller=e()}(this,function(){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=4)}([function(t,e){t.exports=function(t,e,n,o){var i,r=t=t||{},a=typeof t.default;"object"!==a&&"function"!==a||(i=t,r=t.default);var l="function"==typeof r?r.options:r;if(e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns),n&&(l._scopeId=n),o){var s=Object.create(l.computed||null);Object.keys(o).forEach(function(t){var e=o[t];s[t]=function(){return e}}),l.computed=s}return{esModule:i,exports:r,options:l}}},function(t,e,n){n(14);var o=n(0)(n(3),n(13),"data-v-ecaca2b0",null);t.exports=o.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{fillColor:{type:String,default:"#AAA"}}}},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var i=n(5),r=o(i),a=n(6),l=o(a),s=n(10),c=o(s),_=n(9),u=o(_),f=/^[d]+(\%)?$/,p=function(t){return"%"!=t[t.length-1]?t+"px":t},h=function(t){return f.test(t)};e.default={components:{Spinner:c.default,Arrow:u.default},props:{onRefresh:Function,onInfinite:Function,refreshText:{type:String,default:"下拉刷新"},noDataText:{type:String,default:"没有更多数据"},{type:String,default:"100%",validator:h},height:{type:String,default:"100%",validator:h},snapping:{type:Boolean,default:!1},snapWidth:{type:Number,default:100},snapHeight:{type:Number,default:100},animating:{type:Boolean,default:!0},animationDuration:{type:Number,default:250},bouncing:{type:Boolean,default:!0},refreshLayerColor:{type:String,default:"#AAA"},loadingLayerColor:{type:String,default:"#AAA"},cssClass:String,minContentHeight:{type:Number,default:0}},computed:{w:function(){return p(this.width)},h:function(){return p(this.height)},showInfiniteLayer:function(){var t=0;return this.content&&(t=this.content.offsetHeight),!!this.onInfinite&&t>this.minContentHeight}},data:function(){return{containerId:"outer-"+Math.random().toString(36).substring(3,8),contentId:"inner-"+Math.random().toString(36).substring(3,8),state:0,loadingState:0,showLoading:!1,container:void 0,content:void 0,scroller:void 0,pullToRefreshLayer:void 0,mousedown:!1,infiniteTimer:void 0,resizeTimer:void 0}},mounted:function(){var t=this;this.container=document.getElementById(this.containerId),this.container.style.width=this.w,this.container.style.height=this.h,this.content=document.getElementById(this.contentId),this.cssClass&&this.content.classList.add(this.cssClass),this.pullToRefreshLayer=this.content.getElementsByTagName("div")[0];var e=(0,l.default)(this.content);this.scroller=new r.default(e,{scrollingX:!1,snapping:this.snapping,animating:this.animating,animationDuration:this.animationDuration,bouncing:this.bouncing}),this.onRefresh&&this.scroller.activatePullToRefresh(60,function(){t.state=1},function(){t.state=0},function(){t.state=2,t.$on("$finishPullToRefresh",function(){setTimeout(function(){t.state=0,t.finishPullToRefresh()})}),t.onRefresh(t.finishPullToRefresh)}),this.onInfinite&&(this.infiniteTimer=setInterval(function(){var e=t.scroller.getValues(),n=(e.left,e.top);e.zoom;if(t.content.offsetHeight>0&&n+60>t.content.offsetHeight-t.container.clientHeight){if(t.loadingState)return;t.loadingState=1,t.showLoading=!0,t.onInfinite(t.finishInfinite)}},10));var n=this.container.getBoundingClientRect();this.scroller.setPosition(n.left+this.container.clientLeft,n.top+this.container.clientTop),this.snapping&&this.scroller.setSnapSize(this.snapWidth,this.snapHeight);var o=function(){return{t.content.offsetWidth,height:t.content.offsetHeight}},i=o(),a=i.content_width,s=i.content_height;this.resizeTimer=setInterval(function(){var e=o(),n=e.width,i=e.height;n===a&&i===s||(a=n,s=i,t.resize())},10)},destroyed:function(){clearInterval(this.resizeTimer),this.infiniteTimer&&clearInterval(this.infiniteTimer)},methods:{resize:function(){var t=this.container,e=this.content;this.scroller.setDimensions(t.clientWidth,t.clientHeight,e.offsetWidth,e.offsetHeight)},finishPullToRefresh:function(){this.scroller.finishPullToRefresh()},finishInfinite:function(t){this.loadingState=t?2:0,this.showLoading=!1,2==this.loadingState&&this.resetLoadingState()},triggerPullToRefresh:function(){this.scroller.triggerPullToRefresh()},scrollTo:function(t,e,n){this.scroller.scrollTo(t,e,n)},scrollBy:function(t,e,n){this.scroller.scrollBy(t,e,n)},touchStart:function(t){t.target.tagName.match(/input|textarea|select/i)||this.scroller.doTouchStart(t.touches,t.timeStamp)},touchMove:function(t){t.preventDefault(),this.scroller.doTouchMove(t.touches,t.timeStamp)},touchEnd:function(t){this.scroller.doTouchEnd(t.timeStamp)},mouseDown:function(t){t.target.tagName.match(/input|textarea|select/i)||(this.scroller.doTouchStart([{pageX:t.pageX,pageY:t.pageY}],t.timeStamp),this.mousedown=!0)},mouseMove:function(t){this.mousedown&&(this.scroller.doTouchMove([{pageX:t.pageX,pageY:t.pageY}],t.timeStamp),this.mousedown=!0)},mouseUp:function(t){this.mousedown&&(this.scroller.doTouchEnd(t.timeStamp),this.mousedown=!1)},getPosition:function(){var t=this.scroller.getValues();return{left:parseInt(t.left),top:parseInt(t.top)}},resetLoadingState:function(){var t=this,e=this.scroller.getValues(),n=(e.left,e.top);e.zoom,this.container,this.content;n+60>this.content.offsetHeight-this.container.clientHeight?setTimeout(function(){t.resetLoadingState()},1e3):this.loadingState=0}}}},function(t,e,n){"use strict";function o(t){o.installed||(o.installed=!0,t.component("scroller",a.default))}Object.defineProperty(e,"__esModule",{value:!0});var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r=n(1),a=function(t){return t&&t.__esModule?t:{default:t}}(r),l={install:o,Scroller:a.default};void 0!==("undefined"==typeof window?"undefined":i(window))&&window.Vue&&window.Vue.use(l),e.default=l},function(t,e,n){"use strict";var o;!function(i){var r=function(){},a=function(t){var e=Date.now||function(){return+new Date},n={},o=1,i={effect:{}};return i.effect.Animate={requestAnimationFrame:function(){var e=t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame,n=!!e;if(e&&!/requestAnimationFrame()s*{s*[native code]s*}/i.test(e.toString())&&(n=!1),n)return function(t,n){e(t,n)};var o={},i=0,r=1,a=null,l=+new Date;return function(t,e){var n=r++;return o[n]=t,i++,null===a&&(a=setInterval(function(){var t=+new Date,e=o;o={},i=0;for(var n in e)e.hasOwnProperty(n)&&(e[n](t),l=t);t-l>2500&&(clearInterval(a),a=null)},1e3/60)),n}}(),stop:function(t){var e=null!=n[t];return e&&(n[t]=null),e},isRunning:function(t){return null!=n[t]},start:function(t,r,a,l,s,c){var _=e(),u=_,f=0,p=0,h=o++;if(c||(c=document.body),h%20==0){var d={};for(var m in n)d[m]=!0;n=d}var g=function o(d){var m=!0!==d,g=e();if(!n[h]||r&&!r(h))return n[h]=null,void(a&&a(60-p/((g-_)/1e3),h,!1));if(m)for(var v=Math.round((g-u)/(1e3/60))-1,y=0;y<Math.min(v,4);y++)o(!0),p++;l&&(f=(g-_)/l)>1&&(f=1);var T=s?s(f):f;!1!==t(T,g,m)&&1!==f||!m?m&&(u=g,i.effect.Animate.requestAnimationFrame(o,c)):(n[h]=null,a&&a(60-p/((g-_)/1e3),h,1===f||null==l))};return n[h]=!0,i.effect.Animate.requestAnimationFrame(g,c),h}},i}(i),l=function(t,e){this.__callback=t,this.options={scrollingX:!0,scrollingY:!0,animating:!0,animationDuration:250,bouncing:!0,locking:!0,paging:!1,snapping:!1,zooming:!1,minZoom:.5,maxZoom:3,speedMultiplier:1,scrollingComplete:r,penetrationDeceleration:.03,penetrationAcceleration:.08};for(var n in e)this.options[n]=e[n]},s=function(t){return Math.pow(t-1,3)+1},c=function(t){return(t/=.5)<1?.5*Math.pow(t,3):.5*(Math.pow(t-2,3)+2)},_={__isSingleTouch:!1,__isTracking:!1,__didDecelerationComplete:!1,__isGesturing:!1,__isDragging:!1,__isDecelerating:!1,__isAnimating:!1,__clientLeft:0,__clientTop:0,__clientWidth:0,__clientHeight:0,__contentWidth:0,__contentHeight:0,__snapWidth:100,__snapHeight:100,__refreshHeight:null,__refreshActive:!1,__refreshActivate:null,__refreshDeactivate:null,__refreshStart:null,__zoomLevel:1,__scrollLeft:0,__scrollTop:0,__maxScrollLeft:0,__maxScrollTop:0,__scheduledLeft:0,__scheduledTop:0,__scheduledZoom:0,__lastTouchLeft:null,__lastTouchTop:null,__lastTouchMove:null,__positions:null,__minDecelerationScrollLeft:null,__minDecelerationScrollTop:null,__maxDecelerationScrollLeft:null,__maxDecelerationScrollTop:null,__decelerationVelocityX:null,__decelerationVelocityY:null,setDimensions:function(t,e,n,o){var i=this;t===+t&&(i.__clientWidth=t),e===+e&&(i.__clientHeight=e),n===+n&&(i.__contentWidth=n),o===+o&&(i.__contentHeight=o),i.__computeScrollMax(),i.scrollTo(i.__scrollLeft,i.__scrollTop,!0)},setPosition:function(t,e){var n=this;n.__clientLeft=t||0,n.__clientTop=e||0},setSnapSize:function(t,e){var n=this;n.__snapWidth=t,n.__snapHeight=e},activatePullToRefresh:function(t,e,n,o){var i=this;i.__refreshHeight=t,i.__refreshActivate=e,i.__refreshDeactivate=n,i.__refreshStart=o},triggerPullToRefresh:function(){this.__publish(this.__scrollLeft,-this.__refreshHeight,this.__zoomLevel,!0),this.__refreshStart&&this.__refreshStart()},finishPullToRefresh:function(){var t=this;t.__refreshActive=!1,t.__refreshDeactivate&&t.__refreshDeactivate(),t.scrollTo(t.__scrollLeft,t.__scrollTop,!0)},getValues:function(){var t=this;return{left:t.__scrollLeft,top:t.__scrollTop,zoom:t.__zoomLevel}},getScrollMax:function(){var t=this;return{left:t.__maxScrollLeft,top:t.__maxScrollTop}},zoomTo:function(t,e,n,o,i){var r=this;if(!r.options.zooming)throw new Error("Zooming is not enabled!");i&&(r.__zoomComplete=i),r.__isDecelerating&&(a.effect.Animate.stop(r.__isDecelerating),r.__isDecelerating=!1);var l=r.__zoomLevel;null==n&&(n=r.__clientWidth/2),null==o&&(o=r.__clientHeight/2),t=Math.max(Math.min(t,r.options.maxZoom),r.options.minZoom),r.__computeScrollMax(t);var s=(n+r.__scrollLeft)*t/l-n,c=(o+r.__scrollTop)*t/l-o;s>r.__maxScrollLeft?s=r.__maxScrollLeft:s<0&&(s=0),c>r.__maxScrollTop?c=r.__maxScrollTop:c<0&&(c=0),r.__publish(s,c,t,e)},zoomBy:function(t,e,n,o,i){var r=this;r.zoomTo(r.__zoomLevel*t,e,n,o,i)},scrollTo:function(t,e,n,o){var i=this;if(i.__isDecelerating&&(a.effect.Animate.stop(i.__isDecelerating),i.__isDecelerating=!1),null!=o&&o!==i.__zoomLevel){if(!i.options.zooming)throw new Error("Zooming is not enabled!");t*=o,e*=o,i.__computeScrollMax(o)}else o=i.__zoomLevel;i.options.scrollingX?i.options.paging?t=Math.round(t/i.__clientWidth)*i.__clientWidth:i.options.snapping&&(t=Math.round(t/i.__snapWidth)*i.__snapWidth):t=i.__scrollLeft,i.options.scrollingY?i.options.paging?e=Math.round(e/i.__clientHeight)*i.__clientHeight:i.options.snapping&&(e=Math.round(e/i.__snapHeight)*i.__snapHeight):e=i.__scrollTop,t=Math.max(Math.min(i.__maxScrollLeft,t),0),e=Math.max(Math.min(i.__maxScrollTop,e),0),t===i.__scrollLeft&&e===i.__scrollTop&&(n=!1),i.__isTracking||i.__publish(t,e,o,n)},scrollBy:function(t,e,n){var o=this,i=o.__isAnimating?o.__scheduledLeft:o.__scrollLeft,r=o.__isAnimating?o.__scheduledTop:o.__scrollTop;o.scrollTo(i+(t||0),r+(e||0),n)},doMouseZoom:function(t,e,n,o){var i=this,r=t>0?.97:1.03;return i.zoomTo(i.__zoomLevel*r,!1,n-i.__clientLeft,o-i.__clientTop)},doTouchStart:function(t,e){if(null==t.length)throw new Error("Invalid touch list: "+t);if(e instanceof Date&&(e=e.valueOf()),"number"!=typeof e)throw new Error("Invalid timestamp value: "+e);var n=this;n.__interruptedAnimation=!0,n.__isDecelerating&&(a.effect.Animate.stop(n.__isDecelerating),n.__isDecelerating=!1,n.__interruptedAnimation=!0),n.__isAnimating&&(a.effect.Animate.stop(n.__isAnimating),n.__isAnimating=!1,n.__interruptedAnimation=!0);var o,i,r=1===t.length;r?(o=t[0].pageX,i=t[0].pageY):(o=Math.abs(t[0].pageX+t[1].pageX)/2,i=Math.abs(t[0].pageY+t[1].pageY)/2),n.__initialTouchLeft=o,n.__initialTouchTop=i,n.__zoomLevelStart=n.__zoomLevel,n.__lastTouchLeft=o,n.__lastTouchTop=i,n.__lastTouchMove=e,n.__lastScale=1,n.__enableScrollX=!r&&n.options.scrollingX,n.__enableScrollY=!r&&n.options.scrollingY,n.__isTracking=!0,n.__didDecelerationComplete=!1,n.__isDragging=!r,n.__isSingleTouch=r,n.__positions=[]},doTouchMove:function(t,e,n){if(null==t.length)throw new Error("Invalid touch list: "+t);if(e instanceof Date&&(e=e.valueOf()),"number"!=typeof e)throw new Error("Invalid timestamp value: "+e);var o=this;if(o.__isTracking){var i,r;2===t.length?(i=Math.abs(t[0].pageX+t[1].pageX)/2,r=Math.abs(t[0].pageY+t[1].pageY)/2):(i=t[0].pageX,r=t[0].pageY);var a=o.__positions;if(o.__isDragging){var l=i-o.__lastTouchLeft,s=r-o.__lastTouchTop,c=o.__scrollLeft,_=o.__scrollTop,u=o.__zoomLevel;if(null!=n&&o.options.zooming){var f=u;if(u=u/o.__lastScale*n,u=Math.max(Math.min(u,o.options.maxZoom),o.options.minZoom),f!==u){var p=i-o.__clientLeft,h=r-o.__clientTop;c=(p+c)*u/f-p,_=(h+_)*u/f-h,o.__computeScrollMax(u)}}if(o.__enableScrollX){c-=l*this.options.speedMultiplier;var d=o.__maxScrollLeft;(c>d||c<0)&&(o.options.bouncing?c+=l/2*this.options.speedMultiplier:c=c>d?d:0)}if(o.__enableScrollY){_-=s*this.options.speedMultiplier;var m=o.__maxScrollTop;(_>m||_<0)&&(o.options.bouncing?(_+=s/2*this.options.speedMultiplier,o.__enableScrollX||null==o.__refreshHeight||(!o.__refreshActive&&_<=-o.__refreshHeight?(o.__refreshActive=!0,o.__refreshActivate&&o.__refreshActivate()):o.__refreshActive&&_>-o.__refreshHeight&&(o.__refreshActive=!1,o.__refreshDeactivate&&o.__refreshDeactivate()))):_=_>m?m:0)}a.length>60&&a.splice(0,30),a.push(c,_,e),o.__publish(c,_,u)}else{var g=o.options.locking?3:0,v=Math.abs(i-o.__initialTouchLeft),y=Math.abs(r-o.__initialTouchTop);o.__enableScrollX=o.options.scrollingX&&v>=g,o.__enableScrollY=o.options.scrollingY&&y>=g,a.push(o.__scrollLeft,o.__scrollTop,e),o.__isDragging=(o.__enableScrollX||o.__enableScrollY)&&(v>=5||y>=5),o.__isDragging&&(o.__interruptedAnimation=!1)}o.__lastTouchLeft=i,o.__lastTouchTop=r,o.__lastTouchMove=e,o.__lastScale=n}},doTouchEnd:function(t){if(t instanceof Date&&(t=t.valueOf()),"number"!=typeof t)throw new Error("Invalid timestamp value: "+t);var e=this;if(e.__isTracking){if(e.__isTracking=!1,e.__isDragging)if(e.__isDragging=!1,e.__isSingleTouch&&e.options.animating&&t-e.__lastTouchMove<=100){for(var n=e.__positions,o=n.length-1,i=o,r=o;r>0&&n[r]>e.__lastTouchMove-100;r-=3)i=r;if(i!==o){var a=n[o]-n[i],l=e.__scrollLeft-n[i-2],s=e.__scrollTop-n[i-1];e.__decelerationVelocityX=l/a*(1e3/60),e.__decelerationVelocityY=s/a*(1e3/60);var c=e.options.paging||e.options.snapping?4:1;Math.abs(e.__decelerationVelocityX)>c||Math.abs(e.__decelerationVelocityY)>c?e.__refreshActive||e.__startDeceleration(t):e.options.scrollingComplete()}else e.options.scrollingComplete()}else t-e.__lastTouchMove>100&&e.options.scrollingComplete();e.__isDecelerating||(e.__refreshActive&&e.__refreshStart?(e.__publish(e.__scrollLeft,-e.__refreshHeight,e.__zoomLevel,!0),e.__refreshStart&&e.__refreshStart()):((e.__interruptedAnimation||e.__isDragging)&&e.options.scrollingComplete(),e.scrollTo(e.__scrollLeft,e.__scrollTop,!0,e.__zoomLevel),e.__refreshActive&&(e.__refreshActive=!1,e.__refreshDeactivate&&e.__refreshDeactivate()))),e.__positions.length=0}},__publish:function(t,e,n,o){var i=this,r=i.__isAnimating;if(r&&(a.effect.Animate.stop(r),i.__isAnimating=!1),o&&i.options.animating){i.__scheduledLeft=t,i.__scheduledTop=e,i.__scheduledZoom=n;var l=i.__scrollLeft,_=i.__scrollTop,u=i.__zoomLevel,f=t-l,p=e-_,h=n-u,d=function(t,e,n){n&&(i.__scrollLeft=l+f*t,i.__scrollTop=_+p*t,i.__zoomLevel=u+h*t,i.__callback&&i.__callback(i.__scrollLeft,i.__scrollTop,i.__zoomLevel))},m=function(t){return i.__isAnimating===t},g=function(t,e,n){e===i.__isAnimating&&(i.__isAnimating=!1),(i.__didDecelerationComplete||n)&&i.options.scrollingComplete(),i.options.zooming&&(i.__computeScrollMax(),i.__zoomComplete&&(i.__zoomComplete(),i.__zoomComplete=null))};i.__isAnimating=a.effect.Animate.start(d,m,g,i.options.animationDuration,r?s:c)}else i.__scheduledLeft=i.__scrollLeft=t,i.__scheduledTop=i.__scrollTop=e,i.__scheduledZoom=i.__zoomLevel=n,i.__callback&&i.__callback(t,e,n),i.options.zooming&&(i.__computeScrollMax(),i.__zoomComplete&&(i.__zoomComplete(),i.__zoomComplete=null))},__computeScrollMax:function(t){var e=this;null==t&&(t=e.__zoomLevel),e.__maxScrollLeft=Math.max(e.__contentWidth*t-e.__clientWidth,0),e.__maxScrollTop=Math.max(e.__contentHeight*t-e.__clientHeight,0)},__startDeceleration:function(t){var e=this;if(e.options.paging){var n=Math.max(Math.min(e.__scrollLeft,e.__maxScrollLeft),0),o=Math.max(Math.min(e.__scrollTop,e.__maxScrollTop),0),i=e.__clientWidth,r=e.__clientHeight;e.__minDecelerationScrollLeft=Math.floor(n/i)*i,e.__minDecelerationScrollTop=Math.floor(o/r)*r,e.__maxDecelerationScrollLeft=Math.ceil(n/i)*i,e.__maxDecelerationScrollTop=Math.ceil(o/r)*r}else e.__minDecelerationScrollLeft=0,e.__minDecelerationScrollTop=0,e.__maxDecelerationScrollLeft=e.__maxScrollLeft,e.__maxDecelerationScrollTop=e.__maxScrollTop;var l=function(t,n,o){e.__stepThroughDeceleration(o)},s=e.options.snapping?4:.001,c=function(){var t=Math.abs(e.__decelerationVelocityX)>=s||Math.abs(e.__decelerationVelocityY)>=s;return t||(e.__didDecelerationComplete=!0),t},_=function(t,n,o){e.__isDecelerating=!1,e.__didDecelerationComplete&&e.options.scrollingComplete(),e.scrollTo(e.__scrollLeft,e.__scrollTop,e.options.snapping)};e.__isDecelerating=a.effect.Animate.start(l,c,_)},__stepThroughDeceleration:function(t){var e=this,n=e.__scrollLeft+e.__decelerationVelocityX,o=e.__scrollTop+e.__decelerationVelocityY;if(!e.options.bouncing){var i=Math.max(Math.min(e.__maxDecelerationScrollLeft,n),e.__minDecelerationScrollLeft);i!==n&&(n=i,e.__decelerationVelocityX=0);var r=Math.max(Math.min(e.__maxDecelerationScrollTop,o),e.__minDecelerationScrollTop);r!==o&&(o=r,e.__decelerationVelocityY=0)}if(t?e.__publish(n,o,e.__zoomLevel):(e.__scrollLeft=n,e.__scrollTop=o),!e.options.paging){e.__decelerationVelocityX*=.95,e.__decelerationVelocityY*=.95}if(e.options.bouncing){var a=0,l=0,s=e.options.penetrationDeceleration,c=e.options.penetrationAcceleration;n<e.__minDecelerationScrollLeft?a=e.__minDecelerationScrollLeft-n:n>e.__maxDecelerationScrollLeft&&(a=e.__maxDecelerationScrollLeft-n),o<e.__minDecelerationScrollTop?l=e.__minDecelerationScrollTop-o:o>e.__maxDecelerationScrollTop&&(l=e.__maxDecelerationScrollTop-o),0!==a&&(a*e.__decelerationVelocityX<=0?e.__decelerationVelocityX+=a*s:e.__decelerationVelocityX=a*c),0!==l&&(l*e.__decelerationVelocityY<=0?e.__decelerationVelocityY+=l*s:e.__decelerationVelocityY=l*c)}}};for(var u in _)l.prototype[u]=_[u];void 0!==t&&t.exports?t.exports=l:void 0!==(o=function(){return l}.call(e,n,e,t))&&(t.exports=o)}(window)},function(t,e,n){"use strict";function o(t){var e,n=window,o=document.documentElement.style;n.opera&&"[object Opera]"===Object.prototype.toString.call(opera)?e="presto":"MozAppearance"in o?e="gecko":"WebkitAppearance"in o?e="webkit":"string"==typeof navigator.cpuClass&&(e="trident");var i={trident:"ms",gecko:"Moz",webkit:"Webkit",presto:"O"}[e],r=document.createElement("div"),a=i+"Perspective",l=i+"Transform";return void 0!==r.style[a]?function(e,n,o){t.style[l]="translate3d("+-e+"px,"+-n+"px,0) scale("+o+")"}:void 0!==r.style[l]?function(e,n,o){t.style[l]="translate("+-e+"px,"+-n+"px) scale("+o+")"}:function(e,n,o){t.style.marginLeft=e?-e/o+"px":"",t.style.marginTop=n?-n/o+"px":"",t.style.zoom=o||""}}t.exports=o},function(t,e,n){e=t.exports=n(8)(),e.push([t.i,"._v-container[data-v-ecaca2b0]{-webkit-tap-highlight-color:rgba(0,0,0,0);100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}._v-container>._v-content[data-v-ecaca2b0]{100%;-webkit-transform-origin:left top;-webkit-transform:translateZ(0);-moz-transform-origin:left top;-moz-transform:translateZ(0);-ms-transform-origin:left top;-ms-transform:translateZ(0);-o-transform-origin:left top;-o-transform:translateZ(0);transform-origin:left top;transform:translateZ(0)}._v-container>._v-content>.pull-to-refresh-layer[data-v-ecaca2b0]{100%;height:60px;margin-top:-60px;text-align:center;font-size:16px;color:#aaa}._v-container>._v-content>.loading-layer[data-v-ecaca2b0]{100%;height:60px;text-align:center;font-size:16px;line-height:60px;color:#aaa;position:relative}._v-container>._v-content>.loading-layer>.no-data-text[data-v-ecaca2b0]{position:absolute;left:0;top:0;100%;height:100%;z-index:1}._v-container>._v-content>.loading-layer>.no-data-text[data-v-ecaca2b0],._v-container>._v-content>.loading-layer>.spinner-holder[data-v-ecaca2b0]{opacity:0;transition:opacity .15s linear;-webkit-transition:opacity .15s linear}._v-container>._v-content>.loading-layer>.no-data-text.active[data-v-ecaca2b0],._v-container>._v-content>.loading-layer>.spinner-holder.active[data-v-ecaca2b0]{opacity:1}._v-container>._v-content>.loading-layer .spinner-holder[data-v-ecaca2b0],._v-container>._v-content>.pull-to-refresh-layer .spinner-holder[data-v-ecaca2b0]{text-align:center;-webkit-font-smoothing:antialiased}._v-container>._v-content>.loading-layer .spinner-holder .arrow[data-v-ecaca2b0],._v-container>._v-content>.pull-to-refresh-layer .spinner-holder .arrow[data-v-ecaca2b0]{20px;height:20px;margin:8px auto 0;-webkit-transform:translateZ(0) rotate(0deg);transform:translateZ(0) rotate(0deg);transition:transform .2s linear}._v-container>._v-content>.loading-layer .spinner-holder .text[data-v-ecaca2b0],._v-container>._v-content>.pull-to-refresh-layer .spinner-holder .text[data-v-ecaca2b0]{display:block;margin:0 auto;font-size:14px;line-height:20px;color:#aaa}._v-container>._v-content>.loading-layer .spinner-holder .spinner[data-v-ecaca2b0],._v-container>._v-content>.pull-to-refresh-layer .spinner-holder .spinner[data-v-ecaca2b0]{margin-top:14px;32px;height:32px;fill:#444;stroke:#69717d}._v-container>._v-content>.pull-to-refresh-layer.active .spinner-holder .arrow[data-v-ecaca2b0]{-webkit-transform:translateZ(0) rotate(180deg);transform:translateZ(0) rotate(180deg)}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var n=this[e];n[2]?t.push("@media "+n[2]+"{"+n[1]+"}"):t.push(n[1])}return t.join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(o[r]=!0)}for(i=0;i<e.length;i++){var a=e[i];"number"==typeof a[0]&&o[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(t,e,n){var o=n(0)(n(2),n(11),null,null);t.exports=o.exports},function(t,e,n){var o=n(0)(null,n(12),null,null);t.exports=o.exports},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("svg",{staticStyle:{"enable-background":"new 0 0 63.657 63.657"},attrs:{viewBox:"0 0 63.657 63.657","xml:space":"preserve","512px",height:"512px"}},[n("g",[n("g",[n("g",[n("g",[n("polygon",{attrs:{points:"31.891,63.657 0.012,35.835 2.642,32.821 31.886,58.343 61.009,32.824 63.645,35.832",fill:t.fillColor}})])]),t._v(" "),n("g",[n("g",[n("rect",{attrs:{x:"29.827","4",height:"60",fill:t.fillColor}})])])]),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g")]),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g"),t._v(" "),n("g")])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("svg",{staticClass:"spinner",attrs:{viewBox:"0 0 64 64"}},[n("g",{attrs:{"stroke-width":"4","stroke-linecap":"round"}},[n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(180)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:"1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(210)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:"0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(240)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:".1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(270)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:".15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(300)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:".25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(330)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:".35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(0)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:".45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(30)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:".55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(60)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:".65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(90)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:".7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(120)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:".85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85",repeatCount:"indefinite"}})]),n("line",{attrs:{y1:"17",y2:"29",transform:"translate(32,32) rotate(150)"}},[n("animate",{attrs:{attributeName:"stroke-opacity",dur:"750ms",values:"1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1",repeatCount:"indefinite"}})])])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"_v-container",attrs:{id:t.containerId},on:{touchstart:function(e){t.touchStart(e)},touchmove:function(e){t.touchMove(e)},touchend:function(e){t.touchEnd(e)},mousedown:function(e){t.mouseDown(e)},mousemove:function(e){t.mouseMove(e)},mouseup:function(e){t.mouseUp(e)}}},[n("div",{staticClass:"_v-content",attrs:{id:t.contentId}},[t.onRefresh?n("div",{staticClass:"pull-to-refresh-layer",class:{active:1==t.state,"active refreshing":2==t.state}},[n("span",{staticClass:"spinner-holder"},[2!=t.state?n("arrow",{staticClass:"arrow",attrs:{fillColor:t.refreshLayerColor}}):t._e(),t._v(" "),2!=t.state?n("span",{staticClass:"text",style:{color:t.refreshLayerColor},domProps:{textContent:t._s(t.refreshText)}}):t._e(),t._v(" "),2==t.state?n("span",[t._t("refresh-spinner",[n("spinner",{style:{fill:t.refreshLayerColor,stroke:t.refreshLayerColor}})])],2):t._e()],1)]):t._e(),t._v(" "),t._t("default"),t._v(" "),t.showInfiniteLayer?n("div",{staticClass:"loading-layer"},[n("span",{staticClass:"spinner-holder",class:{active:t.showLoading}},[t._t("infinite-spinner",[n("spinner",{style:{fill:t.loadingLayerColor,stroke:t.loadingLayerColor}})])],2),t._v(" "),n("div",{staticClass:"no-data-text",class:{active:!t.showLoading&&2==t.loadingState},style:{color:t.loadingLayerColor},domProps:{textContent:t._s(t.noDataText)}})]):t._e()],2)])},staticRenderFns:[]}},function(t,e,n){var o=n(7);"string"==typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);n(15)("1ca3e1c8",o,!0)},function(t,e,n){function o(t){for(var e=0;e<t.length;e++){var n=t[e],o=_[n.id];if(o){o.refs++;for(var i=0;i<o.parts.length;i++)o.parts[i](n.parts[i]);for(;i<n.parts.length;i++)o.parts.push(r(n.parts[i]));o.parts.length>n.parts.length&&(o.parts.length=n.parts.length)}else{for(var a=[],i=0;i<n.parts.length;i++)a.push(r(n.parts[i]));_[n.id]={id:n.id,refs:1,parts:a}}}}function i(){var t=document.createElement("style");return t.type="text/css",u.appendChild(t),t}function r(t){var e,n,o=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(o){if(h)return d;o.parentNode.removeChild(o)}if(m){var r=p++;o=f||(f=i()),e=a.bind(null,o,r,!1),n=a.bind(null,o,r,!0)}else o=i(),e=l.bind(null,o),n=function(){o.parentNode.removeChild(o)};return e(t),function(o){if(o){if(o.css===t.css&&o.media===t.media&&o.sourceMap===t.sourceMap)return;e(t=o)}else n()}}function a(t,e,n,o){var i=n?"":o.css;if(t.styleSheet)t.styleSheet.cssText=g(e,i);else{var r=document.createTextNode(i),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(r,a[e]):t.appendChild(r)}}function l(t,e){var n=e.css,o=e.media,i=e.sourceMap;if(o&&t.setAttribute("media",o),i&&(n+=" /*# sourceURL="+i.sources[0]+" */",n+=" /*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var s="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!s)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var c=n(16),_={},u=s&&(document.head||document.getElementsByTagName("head")[0]),f=null,p=0,h=!1,d=function(){},m="undefined"!=typeof navigator&&/msie [6-9]/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,n){h=n;var i=c(t,e);return o(i),function(e){for(var n=[],r=0;r<i.length;r++){var a=i[r],l=_[a.id];l.refs--,n.push(l)}e?(i=c(t,e),o(i)):i=[];for(var r=0;r<n.length;r++){var l=n[r];if(0===l.refs){for(var s=0;s<l.parts.length;s++)l.parts[s]();delete _[l.id]}}}};var g=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join(" ")}}()},function(t,e){t.exports=function(t,e){for(var n=[],o={},i=0;i<e.length;i++){var r=e[i],a=r[0],l=r[1],s=r[2],c=r[3],_={id:t+":"+i,css:l,media:s,sourceMap:c};o[a]?o[a].parts.push(_):n.push(o[a]={id:a,parts:[_]})}return n}}])}); //# sourceMappingURL=vue-scroller.min.js.map
扩展：
改善页面一直没到底部一直刷新的情况
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>v-for</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script src="./vue-scroller.min.js"></script> <style> html, body { margin: 0; } * { box-sizing: border-box; } .row { width: 100%; height: 50px; padding: 10px 0; font-size: 16px; line-height: 30px; text-align: center; color: #444; background-color: #fff; } .grey-bg { background-color: #eee; } .header { position: fixed; top: 0; left: 0; height: 44px; width: 100%; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); background-color: #fff; z-index: 1000; color: #666; } .header > .title { font-size: 16px; line-height: 44px; text-align: center; margin: 0 auto; } </style> </head> <body> <div id="app"> <div class="header"> <h1 class="title">Refresh & Infinite</h1> </div> <scroller :on-refresh="refresh" :on-infinite="infinite" style="padding-top: 44px;"> <div v-for="(item, index) in items" class="row" :class="{'grey-bg': index % 2 == 0}"> {{ item }} </div> </scroller> </div> <script> new Vue({ el: '#app', data: { noDate:false,//这是一个判断是否加载的开关 items:[], page:1, pageSize:3, num:0 //第一步初始0 }, mounted: function () { //初始化数据 条数 for (var i = 1; i <=this.pageSize; i++) { this.items.push(i + ' - keep walking, be 2 with you.'); this.num++; //第二步骤 初始化数据1 console.log("---"+ this.num); } this.top = 1; this.bottom = 20; }, methods: { refresh: function (done) { this.page=0; this.num=0;//恢复测试数据 this.page++; this.getDate(this.page, done); }, infinite: function (done) { this.page++; this.getDate(this.page, done); }, getDate:function(offset,done) { var self = this; if(offset==1)//如果是想下滑动，刷新数据 就让items等于最新数据 { var arr=[]; setTimeout(function () { for (var i = 1; i <= self.pageSize; i++) { arr.push(i + ' - keep walking, be 2 with you.'); this.num++; //第二步骤 初始化数据1 console.log("---"+ self.num); } self.items=arr; done(); }, 1500) }else { if(offset>=8)//两种情况1、 设置5数据没到底部继续刷新，设置2 底部就显示没有更多数据 { //无数据-停止上拉加载 setTimeout(()=>{ done&done(true); },1000);//加延迟只是为了下拉加载数据，有队列的进行 总之 done&done(true)和done() 在数据没有到底部的时候，一个会停止，一个会继续。最终没有数据，就不可以下拉，但是会出现一种情况，我新增了一条数据进去，就需要去刷新了，下拉的是历史数据，最新的在最上面的（那怕是新增数据）的这种情况。 }else{ setTimeout(function () { for (var i = 1; i <= self.pageSize; i++) { self.items.push(i + ' - keep walking, be 2 with you.'); self.num++; //第二步骤 初始化数据1 console.log("---"+ self.num); } done(); }, 1500) } } } } }); </script> </body> </html>
布局代码：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>OverseasLandList</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script src="./vue-scroller.min.js"></script> <style> html, body { margin: 0; background: #f2f2f2; } * { box-sizing: border-box; } i { font-style: normal; } /*头部标题*/ .header { position: fixed; top: 0; left: 0; height: 44px; width: 100%; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); background-color: #fff; z-index: 1000; color: #666; } .header > .title { font-size: 16px; line-height: 44px; text-align: center; margin: 0 auto; } /*头部标题*/ .img img { width: 100%; height: 100%; } .row { width: 94%; height: 100px; margin: 10px auto; font-size: 16px; text-align: left; color: #444; background-color: #fff; /*1、父级设置flex，让.img 和.content左右布局*/ display: flex; } .img { width: 100px; height: 100px; } /*这个内容当作父级再次设置flex，.text div居中*/ .row .content { /* 此处解释下 flex: 1 1 0% 0%表示此处宽度是按照自身内容宽度来，此处自身内容宽度为0，但是分配剩余的空间，所以可以自适应变化 */ flex: 1; /* 随父级变化 */ /* 在设置居中内容 */ display: flex; align-items: center; } .content .text { padding-left: 20px; } .title { font-weight: bold; } .info { font-size: 12px; } .price { color: #009de2; font-weight: bold; margin-right: 0.1rem; } .text i { font-size: 10px; } </style> </head> <body> <div id="app" class="wrapper"> <div class="header"> <h1 class="title">Refresh & Infinite</h1> </div> <scroller :on-refresh="refresh" :on-infinite="infinite" style="padding-top: 44px;"> <div v-for="(item, index) in items" class="row"> <div class="img"> <img src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3357786243,3135716437&fm=26&gp=0.jpg' /> </div> <div class="content"> <div class="text"> <span class="title">洛神赋</span> </br><span class="info">洛神赋</span> </br><span class="price">20<i>元/m2</i></span> </div> </div> </div> </scroller> </div> <script> new Vue({ el: '#app', data: { items: [], index: 1 }, mounted: function () { //for (var i = 1; i <= 20; i++) { // this.items.push(i + ' - keep walking, be 2 with you.'); //} }, methods: { getList: function () { $.getJSON("/OverseasLand/List", { pageIndex: this.index }, function (res) { console.log("result:" + res); this.items=res.ResultData.ListData; //设置原房源数据 }); }, refresh: function (done) { var self = this setTimeout(function () { var start = self.top - 1 for (var i = start; i > start - 10; i--) { self.items.splice(0, 0, i + ' - keep walking, be 2 with you.'); } self.top = self.top - 10; done(); }, 1500) }, infinite: function (done) { var self = this setTimeout(function () { var start = self.bottom + 1; for (var i = start; i < start + 10; i++) { self.items.push(i + ' - keep walking, be 2 with you.'); } self.bottom = self.bottom + 10; done(); }, 1500) } },created() { this.top = 1; this.bottom = 20; } }); </script> </body> </html>