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();滾動到內容的相對位置