1 下载
npm i vue-scroller2 引入
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**/
<scroller class="wrapper" ref="wrapper":on-refresh="refresh":on-infinite="loadMore"><!-- list --></scroller> 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 | false |
| snappingWidth | 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 manuallyfinishPullToRefresh()stop pull-to-refreshfinishInfinite(isNoMoreData :Boolean)stop infinite-loadingscrollTo(x:Integer, y:Integer, animate:Boolean)scroll to a position in scroller contentscrollBy(x:Integer, y:Integer, animate:Boolean)scroll by a position in scroller contentgetPosition :Objectget current position of scroller content