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

一、前言、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}

 

二、問題：

       第一個考慮的上拉加載事件：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;//回到最頂部
    },
   }
}