vue-scroller 滑动组件使用指南

在页面中常常会用到滚动，下拉刷新，下拉加载等功能，vux的scroller可使用，可是它再也不维护，并且要配合load-more组件一块儿使用。因此通常在项目中我都是用vue-scroller.

vue-scroller文档

1.在项目中安装：

npm i vue-scroller -S

2.在main.js中引用

import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

 

3.在须要用到滚动的地方直接使用

<scroller>里面是滚动元素<scroller>

4.使用技巧

（1）通常来讲，咱们都是在一个列表中使用这个滚动，通过实践，在使用scroller时，最好的布局方法是如下这种，一个外部的容器元素，将滚动标签和滚动内容包裹起来，而后这个外层元素进行定位，要是有头部标签须要留出header的高度，而且滚动容器的高度要减少，否则会出现滚动条，在手机上致使滚动到底部看不到头部的状况，在scroller里面再加一层容器的缘由是通常scroller里面只有一个元素性能会比较好，滚动也比较流畅，否则可能会有滚动卡顿，上拉回弹等问题。

<div class="scrollerWrap">
  <scroller  height="100%" :on-refresh="refresh" :on-infinite="infinite" ref="scrollerBottom">
    <main class="scrollerContent">
      <div v-for="item in list">{{item}}</div>
    </main>
  </scroller>
</div>

 .scrollerWrap{
    position:absolute;
    width:100%;
    height:90%;//有header的时候可能会出现滚动条，因此最好高度是除去header的高度
    top:40px;//通常页面有header的时候须要留出header的高度
    bottom:20px;
    main{
      height:100%;
    }
  }

 

 (2)scroller提供的属性（经常使用）：

onRefresh:下拉刷新

refresh(done){//下拉刷新
       //your code
    },

 

onInfinite:上拉加载

infinite(done){//上拉加载
      if(this.isBottom){//当没有更多数据的时候结束加载
        this.loadingTips ="无更多数据"
        setTimeout(()=>{
          done&&done(true);
        },1000);
      }else{//有更多数据时进行数据分页显示
        setTimeout(() => {
          this.page++;
          this.getDataList(this.page);
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset()
          })
        },1500)
      }
    },

refreshText: 下拉刷新的提示文字

noDataText: 上拉加载没有数据的提示文字

(3)scroller提供的方法（经常使用）：

getPosition(): 获得滚动区域当前的位置

scrollTo(): 滚动到页面的某一个位置

scrollBy();滚动到内容的相对位置