html 下拉刷新 加载,vue-scroller实现vue单页面的上拉加载和下拉刷新问题

在vue中如何简单的实现页面的上拉加载和下拉刷新，在这里我推荐使用vue-scrolle插件。

vue-scrolle的基本使用方法：

1.下载

npm i vue-scroller -d

2.导包

import vue from 'vue'

import vuescroller from 'vue-scroller'

vue.use(vuescroller)

3.项目使用

:on-refresh="refresh"

ref="my_scroller">

export default {

methods:{

infinite(done) { //上拉加载

if(this.nodata) {

settimeout(()=>{

this.$refs.my_scroller.finishinfinite(2);

})

return;

}

let self = this;

let i=1;

let start = this.list.length;

settimeout(() => {

for(var k=0;k<9;k++){

self.list.push(k)

}

i++;

if(start/i < 9) {

self.nodata = "没有更多数据"

}

self.$refs.my_scroller.resize();

done()

}, 1500)

},

refresh:function(){ //下拉刷新

console.log('refresh')

this.timeout = settimeout(()=>{

this.$refs.my_scroller.finishpulltorefresh()

}, 1500)

}

}

}

4.修改代码

将模板转成你自己想要的效果。