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

Logo

前往低代码交流专区

更多推荐