vue-scroller的使用 实现下拉刷新 上拉加载初始效果

安装vue-scroller

npm i vue-scroller -D

在main.js中：

import VueScroller from 'vue-scroller'

Vue.use(VueScroller)

 

主要是两个方法：:on-refresh="refresh"下拉刷新回调   :on-infinite="infinite"上拉加载回调

<scroller 

  :on-refresh="refresh"

  :on-infinite="infinite">

  <!-- content goes here     这里写需要下拉刷新，上拉加载的元素，最好是单个元素，多个元素拉动时会出现小bug-->

</scroller>

 

如：

<template>

　　<div id="main">

　　　　<div class="header">xxxx</div>

　　　　<div class="scrollerBox">

　　　　　　<scroller class="scroller" :on-infinite="infinite"//上拉加载的回调函数

　　　　　　　　　　　　　　　　　:on-refresh="refresh"//下拉刷新的回调函数

　　　　　　　　　　　　　　　　　:noDataText="'上拉加载更多数据''//上拉加载结束时，显示的文字

　　　　　　　　　　　　　　　　　refresh-layer-color="red"//下拉刷新的文字颜色

　　　　　　　　　　　　　　　　　loading-layer-color="red"//上拉加载的文字颜色

　　　　　　　　　　　　　　　　　ref="myscroller">

　　　　　　　　<div class="content">xxx</div>

　　　　　　</scroller>

　　　　</div>

　　　　<div class="footer">底部</div>

　　</div>

</template>

scroller外部最好用一个元素包裹，将头部和底部位置留出来，scroller里面的元素不要订高，height:100%;不会生效，只有固定px高度才会生效，不过这个元素里面需要上拉加载新东西，所以不要订高

methods中写入infinite   和  refresh两个方法

 

infinite() {//上拉加载

　　let self = this;

　　let start = this.moveList.length;

　　setTimeout(() => {

　　　　for(let i = 0; i < 2; i++) {

　　　　　　if(start>=11){

　　　　　　　　self.$refs.myscroller.noDataText="没有更多数据了"//更改上拉加载的文字

　　　　　　　　self.$refs.myscroller.finishInfinite(true);

　　　　　　　　return

　　　　　　}

　　　　　　self.moveList.push(i)//这是在data里的一个数组

　　　　}

　　}, 1500)

　　setTimeout(()=>{

　　　　this.$refs.myscroller.finishInfinite(true);//停止上拉加载的动效，出现没有“"没有更多数据了”的提示，当传里面的布尔值代表isNoMoreData :Boolean，是否没有更多数据，true：没有更多数据，false：还有数据，至于有什么区别，传一下对比一下就行了

　　},1000)

},

 

refresh() {//下拉刷新

　　var self=this;

　　console.log('refresh');

　　setTimeout(function(){

　　　　self.$refs.myscroller.finishPullToRefresh();//停止下拉刷新动效

　　},1500)

}

 

上面是一个简单的demo

下面奉上官方api网址：

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