vue-scroller 页面滚动相关总结

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

**/

 

<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 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