導航:首頁 > 編程語言 > reactjs滑動載入
reactjs滑動載入
發布時間：2023-06-07 10:56:41A. 如何實現Reactjs 監聽頁面滾動事件
實現ReactJS 監聽頁面滾動事件，代碼如下：
export class Example extends Component{ scrollHandler = this.handleScroll.bind(this); componentDidMount() { window.addEventListener('scroll', this.scrollHandler); } _handleScroll(scrollTop) { console.log(scrollTop) //滾動條距專離頁面的高屬度 } } handleScroll(event) { let scrollTop = event.srcElement.body.scrollTop; this._handleScroll(scrollTop); }}
B. js控制頁面滾動（實例）
目標描述：多個圖片排列下來，按右邊的小按鈕，抵達相應位置，滑鼠滑動，抵達下一圖，或者上一圖
知識點：onmousewheel，addEventListener，scrollTo，setTimeout
過程：
1.body 寬，高釘死，100vw，100vh，overflow：hidden 使得不出現滾動條，不然不好看
2.圖片放進去，排起來，（注意：默認空隙的處理，可以使用flex布局，空隙就不見了）
3.製作相對於視窗的按鈕，幾張圖片就幾個按鈕，（position: fixed;計算一下高度，可以利用calc計算top使得上下居中）
4.美化一下，css寫寫
5.先寫簡單的按鈕事件
6.寫監聽滑動事件(onmousewheel在火狐無效，DOMMouseScroll只在火狐有效)
react在componentDidMount的時候監聽
7.補充寫一下火狐的
9.測試檢查一下。
完成啦，啦啦啦～
我的截圖：
缺點：這里我是一直對頁面進行監聽，導致滑動過快對時候動畫效果開始執行對時間延後。體現為滑動對輕，整個就流暢一點。
ps：寫這種帶計算帶頁面，我覺得是考驗思維的，你可以對這里的知識點不熟練，但是你必須得能理解每一步的加加減減。
C. 如何用reactjs構建一個完整的前端頁面
用reactjs構建一個完整的前端頁面的步驟：
准備：React 的安裝包，建議去官網下載安裝
1、使用 React 的網頁源碼，結構大致如下：
<!DOCTYPE html><html><head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script></head><body> <div id="example"></div> <script type="text/babel"> // **用戶代碼 ** </script></body></html>
上面代碼有兩個地方需要注意。
首先，最後一個<script>標簽的type屬性為text/babel。這是因為 React 獨有的 JSX 語法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上type="text/babel"。
其次，上面代碼一共用了三個庫：react.js、react-dom.js和Browser.js，它們必須首先載入。其中，react.js是 React 的核心庫，react-dom.js是提供與 DOM 相關的功能，Browser.js的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到伺服器完成。
2、將src子目錄的js文件進行語法轉換，轉碼後的文件全部放在build子目錄。
$ babel src --out-dir build
3、渲染轉換成html節點，以方便操作dom：
ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
這里以插入hello world為例來說明
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example'));
4、運行結果如下：
D. 搭建reactJS 項目的時候 區分各種環境進行打包處理
首先需要安裝一下 dotenv-cli
（dotenv-cli 工具提供了多環境配置的能力；其使用過程為：對不同環境設置不同的環境變數文件，通過設置前端工程執行命令載入對應的環境變數文件，即可實現多環境的配置。）
cnpm install dotenv-cli -D
配置完事後 在項目根目錄下新建 例如 .env.dev .env.prod 的 test 類型文件
文件內寫入 對應的環境配置內容
如 圖
配置完事後 再去 package.json 文件中 修改配置如圖
這樣 其實就完成了 各種環境的打包配置
在webpack.config.js 中輸出 配置的路徑 如圖
與reactjs滑動載入相關的資料
- 數字電位器程序
- c代碼整理
- java版貪吃蛇畢業論文
- 圖片寬度代碼
- java後台校驗框架
- js中csstext
- 請帖製作網站java源碼
- html5中加入js
- iphone程序加密
- js裡面的圖片對齊
- jsonobject解析list
- 發送失敗錯誤代碼10009
- js獲取div中的圖片不顯示不出來
- java設置過期日期
- 注冊表禁止啟動程序運行
- 前端程序員簡歷模板
- 微信小程序tips
- java線程買票案例
- java架構培訓
- 解壓代碼選擇
- 西安程序員工資
- extjsgrid刪除列
- js姓名正則
- 前台中jrequestjson
- jsp的六大
- js點擊按鈕下載圖片
- 濟南java程序員工資
- 解鎖後程序啟動
- js操作符
- jsp的書籍推薦
- 鬥地主發牌程序c語言
- svn代碼提交規范
- json實現通用的下拉框
- 前端代碼優化面試
- js判斷手機系統版本號
- java定義變數boolean
- qq閱讀hjava
- extjs復制對象
- java強制下線
- msvcr110dll程序入口點
- java在線查看pdf
- js獲得粘貼的數據