uni-app中使用scroll-view滾到底部時屢次觸發scrolltolower

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

前言：

　　前段時間使用scroll-view可滾動視圖區域容器來作多個不一樣內容的展現（在我這個頁面中同時使用了三個scroll-view作數據展現），由於這幾個展現的內容的數據都比較的多，所以爲了頁面的數據加載順暢決定使用上拉加載（簡單的說就是數據分頁顯示）。

頁面組成以下圖所示：

scroll-view屬性說明：

屬性名	類型	默認值	說明	平臺差別說明
scroll-x	Boolean	false	容許橫向滾動
scroll-y	Boolean	false	容許縱向滾動
upper-threshold	Number	50	距頂部/左邊多遠時（單位px），觸發 scrolltoupper 事件
lower-threshold	Number	50	距底部/右邊多遠時（單位px），觸發 scrolltolower 事件
scroll-top	Number		設置豎向滾動條位置
scroll-left	Number		設置橫向滾動條位置
scroll-into-view	String		值應爲某子元素id（id不能以數字開頭）。設置哪一個方向可滾動，則在哪一個方向滾動到該元素
scroll-with-animation	Boolean	false	在設置滾動條位置時使用動畫過渡
enable-back-to-top	Boolean	false	iOS點擊頂部狀態欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向	微信小程序
show-scrollbar	Boolean	false	控制是否出現滾動條	App-nvue 2.1.5+
@scrolltoupper	EventHandle		滾動到頂部/左邊，會觸發 scrolltoupper 事件
@scrolltolower	EventHandle		滾動到底部/右邊，會觸發 scrolltolower 事件
@scroll	EventHandle		滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

 

2、問題：

       第一個考慮的上拉加載事件：onReachBottom頁面滾動到底部的事件，經常使用於上拉加載下一頁數據。可是如使用scroll-view致使頁面級沒有滾動，則觸底事件不會被觸發，因此這裏存在的問題是有時候沒法觸發onReachBottom。

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

數據加載屢次以下圖所示：

 

 

 3、解決方案：

關於頁面到最底部屢次觸發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;//回到最頂部
    },
   }
}