vue-cli中vue-scroller

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')

}

index.vue//因为我在这个组件里需要scroller

有疑问可以在下面评论