React實作可頁面可調節-有解無憂

效果預覽

調節頁面.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
            onm ouseMoveCapture={(e) => { if (moving) { setdelta(e.clientX - start.current) } }}
            onm ouseUp={(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) }}
                onm ouseDown={(e) => { setmoving(true); start.current = e.clientX + 5 }}
                onm ouseUp={(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事件里的邏輯不能進行，得不到偏移量，最終導致調節程序不流暢，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553460.html

標籤：其他

上一篇：記錄--超長溢位頭部省略打點，坑這么大，技巧這么多？

下一篇：返回列表