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.项目使用

  <scroller :on-infinite="infinite"
            :on-refresh="refresh"
　　         ref="my_scroller">
       <!-- 项目内容 -->
</scroller>
<script>
　　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)
　　　　　　}

　　　　}
　　}
</script>                

4.修改代码

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