vue-cli中vue-scroller的详细用法，上拉加载下拉刷新,vue-axios获取数据的详细过程

vue目前是众所周知的流行框架大家都知道的，vue全家桶的成员是：vue-cli,vuex,vue-router,vue-axios(vue2.0)。然后它的第三方插件也有很多，比如：vue-scroller,vue-lazyload,vue-awesome-swiper等等的。

之前我已经给大家介绍过vue-lazyload的用法了，今天就给大家说一下vue-scroller的用法吧。

首先在命令行进行`npm||cnpm||bower`下载

npm install vue-scroller -D

:::!!! -D:就是 --save -dev

然后在`你想要用scrolle的那个页面`里将咱们刚才下载的东西引入

  import Vue from 'vue'
  import VueScroller from 'vue-scroller'
  Vue.use(VueScroller)

这个插件主要是标签,谁需要进行上拉加载下拉刷新就给谁加。然后里面有`:on-refresh="refresh"&&:on-infinite="infinite" || ref="domName"`

:::!!! ref是获取dom元素的。
this.$refs.myscroller.resize()//重置大小=>myscroller是上面ref定义的dom元素的名字
this.$refs.myscroller.finishInfinite(2);//没有数据时的处理函数
然后在methods对象里加入两个函数：infinite()&&refresh()

infinite(done) {
  if(this.noData) {
    setTimeout(()=>{
      this.$refs.myscroller.finishInfinite(2);
      })
    return;
    }
    let self = this;//this指向问题
    let start = this.moveList.length;

    setTimeout(() => {
    for(let i = start + 1; i < start + 10; i++) {
      self.moveList.push(i)
    }
    if(start > 30) {
      self.noData = "没有更多数据"
    }
    self.$refs.myscroller.resize();
      done()
    }, 1500)
 }

//done()表示这次异步加载数据完成，加载下一次
//因为这个是同步的，加了setTimeout就是异步加载数据；
//因为涉及到this指向问题，所以将他放在一个变量里。
refresh() {
    console.log('refresh')
  }