今天要用vue实现一个下拉刷新，上拉加载更多的功能，百度发现各种scroll，iscroll、better-scroscroller、vue-infinite-scroll等，最终选择了vue-scroller，没别的原因，就是看这个名字顺眼。
先说简单用法
安装：
npm install vue-scroller -D //网上看是这个参数
main.js：
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
自己的vue：
<template>
<div class="baseBack">
<scroller :on-infinite="infinite" :on-refresh = "refresh" :noDataText="noDataText" ref="my_scroller">
需要刷新、加载更多的模块，可以是list、ul、li等等
</scroller>
</div>
</template>
简言之就是用scroller标签包裹需要上拉、下拉效果的模块
methods：实现:on-infinite="infinite" :on-refresh = "refresh"绑定的infinite、refresh
infinite:function(){
console.log('infinite')
this.timeout = setTimeout(()=>{
if (this.myData.length >= 20) {
this.$refs.my_scroller.finishInfinite(true);
}else{
this.$refs.my_scroller.finishInfinite(false);
}
//this.$refs.my_scroller.resize();//已弃用，
this.myData.push(this.myData[1]);
}, 1500)
},
refresh:function(){
console.log('refresh')
this.timeout = setTimeout(()=>{
this.$refs.my_scroller.finishPullToRefresh()
}, 1500)
},
noDataTextjiu就是没有数据后提示的文字
noDataText:"--我也是有底线的--",
一坑：
下拉提示更新了，一直转圈圈，停不了
解决方案：
this.$refs.my_scroller.finishPullToRefresh()。如上timeout可以gai'改为axios获取数据。success中调用 this.$refs.my_scroller.finishPullToRefresh()即可停止下拉刷新的动画
二坑：
上拉加载更多，一直转圈圈，停不了、上拉5次之后触发不了上拉效果（有可能是2次）
原因有两方面：
一、scroller没有检测到scroll控件大小更新，一般通过绑定数据动态扩展大小，只是做测试，没有什么需要添加的数据zhi'只是看看效果。
二、用 this.$refs.my_scroller.finishInfinite(true); 表示停止上拉加载更多，里面是一个boolean参数，说明是否还有更多数据，如果传入false就会显示noDataText里面的字符串了。
如果没有动态新增数据，使scroller监测容器大小的改变，可能导致上拉5次就不能继续触发上拉效果，
可以把setTimeout改为axios获取数据，success中判断是否有更多的没加载的数据
附上vue-scroller链接