1 下载
npm i vue-scroller
2 引入
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
3 使用
1）添加上拉加载方法和下拉刷新方法
2）加载完成调用 相应的方法结束动画，不然的话会一直显示动画
.wrapper{
width: 100vw;
height:88vh!important;
margin-top:12vh;
border: 1px solid darkblue;
}
/**3）css部分 我的解决方案是：
① 添加一个class给他一个固定的高度，我使用的是vh，也就是说这个滚动列表的高度是固定的又是响应式的，不需要动态计算他的高度了。我的理解是，所有的滚动区域都需要在外层给他一个固定高度的容器，这样她才能滚动。
② 里面的内容不要设置高度。
③ 很奇怪的是如果不设置高这个scroller 组件总是充满整个窗口，
如果设置了高，那么他也会覆盖上面的 header 和tapbar 部分，不知道为什么，难道是用的是绝对定位吗？
我的解决方案是设置一个margin-top，因为用的是vh ，所以每一个组件的高度都是固定的，窗口高度是100vh，所以
很容易计算出margin-top
**/
refresh(){
let that = this;
console.log("刷新");
setTimeout(function(){
console.log(that.$refs.wrapper)
that.$refs.wrapper.finishPullToRefresh();
},2000)
},
loadMore(){
/**
* 这里的原理是，如果滑到最后了，那么就会触发上拉加载，
* 如果你结束了上拉加载，然而下面并没有增加数据，也就是仍然滑到了最底下了，这个时候会再次触发
* 上拉加载更多。
* **/
let that = this;
console.log("加载更多");
setTimeout(()=>{
// 如果插入一个true ，那么地面会显示 ‘没有数据了’，也不会再次触发
that.$refs.wrapper.finishInfinite(true);
console.log("加载完毕")
},2000)
}
4 api
Scroller component attributes:
Attr. Name
Description
Required
Default Value
onRefresh
pull to refresh callback
N
-
onInfinite
infinite loading callback
N
-
onInfinite
infinite loading callback
N
-
refreshText
tips of pull-to-refresh
N
下拉刷新
noDataText
tips of no-more-data when infinite-loading finished
N
没有更多数据
width
scroller container width
N
100%height
scroller container height
N
100%snapping
enable snapping mode
N
falsesnappingWidth
snapping width
N
100 (stand for 100px)
snappingHeight
snapping height
N
100
refreshLayerColor
text color of pull-to-refresh layer
N
#AAA
loadingLayerColor
text color of infinite-loading layer
N
#AAA
minContentHeight
min content height (px) of scroll-content
N
0
Scroller vm instance methods:
resize() resize scroller content (deprecated, cause the scroller's content resizes self automatically)
triggerPullToRefresh() start pull-to-refresh manually
finishPullToRefresh() stop pull-to-refresh
finishInfinite(isNoMoreData :Boolean) stop infinite-loading
scrollTo(x:Integer, y:Integer, animate:Boolean) scroll to a position in scroller content
scrollBy(x:Integer, y:Integer, animate:Boolean) scroll by a position in scroller content
getPosition :Object get current position of scroller content
作者：yuange11111