開門見山，附上我的項目地址，大家可以拉代碼看看效果

https://github.com/dccdc/vipList.git

效果圖

list.png

首先，要選好你的ui框架

• 我用的是官方的vuetify（講道理，這個框架對新手不太友好，但是當(dāng)你熟悉了它的套路后，會發(fā)現(xiàn)它功能確實強大，畢竟是親爹生的），選ui框架的目的就是確定你的tab組件，以及tab切換時怎么和tab頁相對應(yīng)的關(guān)系，有的第三方tab插件不能實現(xiàn)滑動切換。
• vuetify框架的每一個tab頭部對應(yīng)一個tab頁，利用封裝組件的方式，將每個tab頁的內(nèi)容封裝為一個組件，然后在組件內(nèi)部實現(xiàn)下拉刷新，上拉加載。（這里我用的是第三方插件vueScroller，這個用起來也有些坑，后面會詳細(xì)說明）

關(guān)于高度的控制

vueScroller需要設(shè)置高度才能展現(xiàn)內(nèi)容的下拉上拉，我在爬坑時遇到了兩種情況：

1. 利用可視高度vh:我在頁面的最外層設(shè)置了100vh，然后80%高度給了可下拉的內(nèi)容，20%的高度給了tab頭部和其他內(nèi)容，這樣一來，各種功能都正常，似乎是沒有問題，但是最讓人頭疼的設(shè)備適配問題來了，在不同的設(shè)備上20%的高度對應(yīng)的px是不一樣的，這樣tab頭部與內(nèi)容之間就會隔得很開，所以這種方案失敗。
2. 給封裝的Scroller組件加上100vh：這種方案導(dǎo)致了滾動條的出現(xiàn)，并且由于父級沒有實際的高度，無法禁用滾動條，直接舍棄。

解決方案：給最外層父級容器加上100vh，然后tab內(nèi)容高度設(shè)置為100%，tab頭部不設(shè)高度，采用自適應(yīng)，此時會相應(yīng)的出現(xiàn)滾動條，然后禁用掉這個滾動條就好了（使用overflow時，一定要設(shè)高度才能禁用）

VueScroller的使用

• 上代碼

<template>
    <div style="height: 100%;" >
        <scroller ref="myscroller" noDataText="我是有底線的" 
                  :on-refresh="refresh" :on-infinite="infinite" >
            <!-- content goes here -->
            
                
            </v-list>
        </scroller>
    </div>
</template>

            refresh(done) {
                var page = 1;
                this.page = 1;//當(dāng)數(shù)據(jù)不滿一頁時，刷新時會調(diào)用infinite函數(shù)，此處重置一下page
                this.getData(done,page,this.message);
            },
            infinite(done) {
                if(this.firstLoading){//第一次加載時，頁碼不加1
                    this.firstLoading = false;
                }else{
                    this.page++;
                }
                this.getData(done,this.page,this.message);
            },

• 注意的點
  1. 頁面初次加載時，會調(diào)用infinite函數(shù)加載數(shù)據(jù)，所以需要做一個判斷，判斷第一次加載時，page不能增加，以免導(dǎo)致上拉加載的page出錯。
  2. 當(dāng)數(shù)據(jù)不滿一頁時，下拉刷新會調(diào)用infinite函數(shù)，此處需要重置一下page。
  3. 無限加載問題：上拉加載時，當(dāng)接口返回的數(shù)據(jù)為空時，需要手動調(diào)用vueScroller的finishInfinite(true)函數(shù)來停止加載，否則就會導(dǎo)致無限加載的問題。

    this.$refs.myscroller.finishInfinite(true);
//當(dāng)參數(shù)為false時，上拉獲取數(shù)據(jù)可以重新調(diào)用。當(dāng)參數(shù)為true，上拉獲取數(shù)據(jù)回調(diào)函數(shù)停止使用,下拉下部不再顯示loading，會顯示‘暫無更多數(shù)據(jù)’