React實現可頁面可調節

来源:https://www.cnblogs.com/oumannrinn/archive/2023/05/25/17432876.html
-Advertisement-
Play Games

> 效果預覽 ![調節頁面.gif](https://wansherry.com/api/fc01e2c58219126e20367e856ebad24c.gif) > 關鍵代碼 ```javascript //調節視窗大小 useEffect(() => { if (conref.current) ...


效果預覽

調節頁面.gif

關鍵代碼

    //調節視窗大小
    useEffect(() => {
        if (conref.current) {

            conref.current.style.width = `${conref.current.clientWidth + delta}px`
            let t = conref.current.clientWidth + conref.current.offsetLeft + 2
            start.current = t
        }
    }, [delta])


//dom結構
 <div
            onMouseMoveCapture={(e) => { if (moving) { setdelta(e.clientX - start.current) } }}
            onMouseUp={(e) => { moving && setmoving(false) }}
            className="commentManager_body">
            <div ref={conref} className="commentManager_articlelist">
                {
                    articles && articles.map(item => <NavLink to={`/articleManage/manageComments/${item.id}`}  key={item.id}>{item.title}</NavLink>)
                }
            </div>
            <div
                //移動端事件
                onTouchStart={(e) => { start.current = e.touches[0].clientX }}
                onTouchMove={(e) => { setdelta(() => e.touches[0].clientX - start.current) }}
                onMouseDown={(e) => { setmoving(true); start.current = e.clientX + 5 }}
                onMouseUp={(e) => { moving && setmoving(false) }}
                className="adjustBar"></div>
            <div className="commentManager_commentlist">
                <Outlet></Outlet>
            </div>
        </div>

原理

整個視窗分為三個區域,左側為文章列表,右側是用來展示對應文章評論的區域,中間設置了一個寬度為10的區域,用來調節兩邊區域的大小。

首先,將最大的容器設置為display:flex;

左邊的容器設置一個初始寬度,

中間的元素設置固定寬度為10px

右側容器設置flex:1;填充外層容器剩餘空間

處理移動端

在中間的控制條上添加兩個事件,一個是onTouchStart,用於記錄在一開始觸摸時的位置,另一個是onTouchMove,獲取手指在屏幕上移動的位置,並減去開始的位置,獲取x方向的偏移量。根據這個偏移量來調節左側容器的寬度,並更新初始值,就實現了預期的效果。

處理PC端

與移動端不同,在PC端需要使用三個事件函數,onMouseDown,標記此時開始調節大小,設置最開始的位置,onMouseMove,獲取滑鼠移動到的位置,減去初始值獲得x方向偏移量,根據偏移量調節左側容器的寬度,onMouseUp,標記此時不需要調節大小。

註意的是PC端滑鼠始終在屏幕上,所以需要一個變數來區分何時滑鼠移動需要調節大小,何時不需要,同時將onMouseMove事件綁定在最外層盒子上,可以避免由於中間的控制條太窄,滑鼠在移動時偏到外面,造成的move事件里的邏輯不能進行,得不到偏移量,最終導致調節過程不流暢。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 雲原生資料庫在使用存算分離技術後,可以在完全相容MYSQL協議和語法的情況下,極大提升單實例所能承載的數據規模與吞吐能力上限。但除了對客戶端相容外,對整個數據生態(地域容災,數據分析,備份恢復)的適配同樣需要大量的設計優化工作。本次分享GaiaDB在跨地域/異構數據同步場景下,吞吐/實時性/一致性方... ...
  • 鑒於《網路新詞網路熱詞大全ACCESS資料庫》幾百條的記錄數太少,於是找了找網路上的一些流行熱詞網站,挑了個數據量大的採集了下來,經過整理(去除重覆、去除詞長超過10字)共得到1萬4千多條記錄。 熱詞:做完核酸可以領豆油解釋:疫情期間民眾耳朵不好使現狀。其實是“做完核酸不要逗留”。源自海南某地一排隊 ...
  • 《花木百科花木大全[圖]ACCESS資料庫》資料庫是採集全X花木網的圖文數據,資料很詳細,欄位包含種名、學名、別名、花期、生態性狀、觀賞性分類、科、屬、分佈地區、形態特征、生長習性、主要病蟲害、園林用途、主要功能、園林品種推薦、其他等。 因為網站源花木的圖片有限,所以有圖片的花木只有1千多條;並且需 ...
  • 其實互聯網上關於謎語和燈謎的資料仍然是挺多的,但是要想數據量以萬來計算並且是接近10萬的量來看的話,就只能是《近8萬條謎語燈謎大全ACCESS資料庫》了。而且《近8萬條謎語燈謎大全ACCESS資料庫》的數據表欄位中也包含分類欄位,可以根據分類欄位有針對性的給出謎語。 分類情況包含:字謎、成語、人名、 ...
  • 雖然已經有《7千多兒童故事網ACCESS\EXCEL資料庫》這種記錄數的童話故事類數據,但是遇到了好採集的就總想採集下來,後續有時間或有需求可以再做合併等操作。 分類情況統計為: 兒童故事:兒童小故事(1895)、睡前故事(1229)、益智故事(233)、哲理故事(177)。民間故事:世界上下五千年 ...
  • 原本我以為《3萬5千英語句子英語例句大全ACCESS資料庫》例句已經夠多了,沒想到今天遇到一個10萬條英語單詞例句的數據,非常適合與單詞詞典進行關聯學習,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的 ...
  • CSS中,*的作用是通配表示“全部”。遺憾的是,並沒有一種通配元素名的方法。 例如,我有好幾個東西class都標記為了my-element-序號,就像這樣: ```html ... ``` 我現在希望讓所有這些class的東西都應用同一個css規則。可惜,css並不支持這麼一種寫法: ```css ...
  • 近日在編寫一個小程式,將日記功能移植到小程式中,雖然在手機端寫日記一般用不到Markdown,但是仍想在小程式中查看在電腦端寫的Markdown格式的內容,如代碼塊等。 經過查詢,找到一個被廣泛使用的解決方案是towxml 現記錄如下: > 首先將代碼克隆下來 ```js git clone htt ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...