今天要用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)
    }, 

noDataText:"--我也是有底线的--", 

noDataText就是没有数据后提示的文字

 

一坑：

下拉提示更新了，一直转圈圈，停不了

解决方案：

this.$refs.my_scroller.finishPullToRefresh()。如上timeout可以改为axios获取数据。success中调用 this.$refs.my_scroller.finishPullToRefresh()即可停止下拉刷新的动画

 

二坑：

上拉加载更多，一直转圈圈，停不了、上拉5次之后触发不了上拉效果（有可能是2次）

原因有两方面：

一、scroller没有检测到scroll控件大小更新，一般通过绑定数据动态扩展大小，只是做测试，没有什么需要添加的数据只是看看效果。

二、用 this.$refs.my_scroller.finishInfinite(true); 表示停止上拉加载更多，里面是一个boolean参数，说明是否还有更多数据，如果传入false就会显示noDataText里面的字符串了。

如果没有动态新增数据，使scroller监测容器大小的改变，可能导致上拉5次就不能继续触发上拉效果，

可以把setTimeout改为axios获取数据，success中判断是否有更多的没加载的数据

 

附上vue-scroller链接

https://www.npmjs.com/package/vue-scroller