React 頁面上拉到底部後如何觸發事件

2021-09-02 04:55:06 字數 1198 閱讀 7724

應用場景:

資訊流初始化載入一頁資料,上拉觸底後,繼續載入一頁的資料;

1,繫結滾動事件;

2,計算觸底高度,達到高度觸發事件;

繫結事件:

handle為觸發的函式;

componentdidmount()
計算高度:

console.log("資料的高-----------------------", this.refs.onpullup.clientheight);

console.log("滾動的高----------------------", document.documentelement.scrolltop);

console.log("螢幕的高----------------------", document.documentelement.clientheight);

到底後列印的資料:

onpullup為綁在dom上的屬性:

判斷是否到底:

let onpullupheight=this.refs.onpullup.clientheight;

let documentheight=document.documentelement.clientheight;

let documenttop=document.documentelement.scrolltop;

if(onpullupheight>documentheight&&onpullupheight===documentheight+documenttop-50))

}

scroll事件 真機測試失效,使用 touchmove 代替;

(touchmove 在使用者手指離開螢幕後,頁面滑動期間,是不觸發事件的,最終決定與scroll並用)

document.documentelement.scrolltop 失效,使用window.scrolly代替;

react 顯示外部頁面 react 頁面跳轉

問題描述 頁面有跳轉詳情頁以及其他跳轉,其他跳轉都到了詳情頁 解決 路由順序改變一下,跳轉詳情頁的路由在其他同級路由最後 比如 會出問題的寫法 children 詳情頁跳轉路由 path id hidemenu true,name component 其他跳轉路由 path participatio...

Web頁面上的控制項

web頁面,即 aspx檔案 頁面的根目錄下,分為了5部分 0 1 2 3 4 內容依次為 0 1 2 3 4 所以,在遍歷所有頁面上的控制項的時候,就在this.controls 3 中找.問題 遍歷web頁面上所有的textbox,並全部設定為1111 protected void btn cl...

react快取頁面

寫react中時總會跟vue對比,vue中有keep alive做快取頁面,也有相應的api啟用 activated 和停用 deactivated react中我們用react router dom做路由時怎麼快取頁面呢?我想的是在route中乙個exact屬性,當exact為false時下 ro...