一、前言、scroll-view基本屬性：

前言：

　　前段時間使用scroll-view可滾動檢視區域容器來做多個不同內容的展示（在我這個頁面中同時使用了三個scroll-view做資料展示），因為這幾個展示的內容的資料都比較的多，因此為了頁面的資料載入順暢決定使用上拉載入（簡單的說就是資料分頁顯示）。

頁面組成如下圖所示：

scroll-view屬性說明：

二、問題：

       第一個考慮的上拉載入事件：onReachBottom頁面滾動到底部的事件，常用於上拉載入下一頁資料。但是如使用scroll-view導致頁面級沒有滾動，則觸底事件不會被觸發，所以這裡存在的問題是有時候無法觸發onReachBottom。

　　最終選擇了適用scroll-view自帶的滾到底部觸發事件scrolltolower事件，雖然這個事件確實能夠實現上拉載入資料分頁的功能，但是這個是事件存在兩個問題。第一個問題就是當滾動條滾動到底部時會多次觸發scrolltolower事件，第二個問題是當頁面由第一個scroll-view（該頁面已經到了的最底部了）切換到第二個scroll-view時會自動滾動到頁面的最底部（即第二個頁面預設已經到了最底部）。

資料載入多次如下圖所示：

 三、解決方案：

關於頁面到最底部多次觸發scrolltolower事件解決：

       在scrolltolower觸發事件中設定一個定時器setTimeout(callback, delay, rest)，在定時到期以後執行註冊的回撥函式(簡稱防抖)。
程式碼如下所示（簡單示例）：

 <view>
                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
                @scroll="scroll">
                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
                </scroll-view>
</view>

//滾動到最底部觸發事件
lower() {
//1s後執行一次
setTimeout(() => {

//TODO這裡填寫你載入資料的方法
this.getData();

}, 1000)；
},

關於頁面由第一個scroll-view切換到第二個scroll-view時會自動滾動到頁面的最底部：

　　設定一個scrollTop設定豎向滾動條的位置，首先預設為0，當頁面向下滾動會觸發scroll-top事件從而改變scrollTop的值，當切換到第二個scroll-view時在預設設定scrollTop為0，那麼在切換到第二個頁面的同時頁面的豎向滾動條的位置會預設滾動到最頂部，從而解決了預設滾動到最底部載入多次資料的問題。

程式碼如下所示（簡單示例）：

 <view>
                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
                @scroll="scroll" @click="changeScrollView">
                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
                </scroll-view>
</view>

export default {
    data() {
        return {
            scrollTop: 0
        }
    },
    methods: {
    //滾動時觸發事件
    scroll: function(e) {
    // console.log(e.detail.scrollTop);
        this.scrollTop = e.detail.scrollTop;
    },
   //切換scroll-view事件
   changeScrollView(){
        this.scrollTop=0;//回到最頂部
    },
   }
}

&n