使用react完成點(diǎn)擊返回頂部操作

更新時(shí)間：2023年02月19日 10:35:38 作者：mini74

本文主要介紹了使用react完成點(diǎn)擊返回頂部操作，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

首先我們先寫返回頂部的樣式
然后綁定一個(gè)點(diǎn)擊事件，滾動(dòng)到頂部

BackTop onClick={this.props.toTop}>返回</BackTop>

toTop(){
? ? ? ? console.log(111)
? ? ? ? window.scrollTo(0,0)
? ? }

這樣就可以實(shí)現(xiàn)點(diǎn)擊返回到頂部了。

接下來我們要寫滾動(dòng)到一定距離出現(xiàn)，那么我們就需要在reducer.js中定義一個(gè)默認(rèn)數(shù)據(jù)

showTop:false

在index.js中使用mapStateToProps接受這個(gè)值，并且使用三元運(yùn)算通過控制showTop的值來控制顯示隱藏

const mapStateToProps = (state) =>{
        return {
            showTop:state.components.get('showTop')
        }
    }
//通過三元控制顯示隱藏
{
   this.props.showTop ? <BackTop onClick={this.props.toTop}>返回</BackTop> : null
 }

這時(shí)候就需要去監(jiān)聽，頁面滾動(dòng)的距離，直到頁面滾動(dòng)到一定距離時(shí)，派發(fā)action給store，最后改變r(jià)educer中的數(shù)據(jù)，從而達(dá)到目的

//在componentDidMount中監(jiān)聽事件
    componentDidMount() {
        this.bindEvents();
    }
//然后監(jiān)聽
bindEvents() {
    window.addEventListener("scroll", this.props.changeScrollTop)
}
//在mapDispatch中將數(shù)據(jù)傳遞給store，并且判斷滾動(dòng)到什么地方派發(fā)
const mapDispatchToProps = (dispatch) =>{
        return{
            changeScrollTop() {
               if(document.documentElement.scrollTop > 400){
                   dispatch(actionCreators.changeScrollShow(true))
               }else {
                   dispatch(actionCreators.changeScrollShow(false))
               }
            }
        }
    }

在actionCreators定義changeScrollShow方法

export const changeScrollShow = (show) => ({
    type:actionTypes.CHANGE_SCROLL_SHOW,
    show
})

最后在reducer中定義就可以啦

if(action.type === actionTypes.CHANGE_SCROLL_SHOW){
    return state.set('showTop',action.show)
}

react緩慢返回頂部

功能描述：到一定距離顯示返回頂部按鈕，點(diǎn)擊返回頂部，通過 requestAnimationFrame 調(diào)用 backTop 回調(diào)函數(shù) 緩慢返回到頂部

const [show, onShow] = useState(false)
// 返回頂部
const backTop = () => {
    const s = document.documentElement.scrollTop || document.body.scrollTop
    if (s > 0) {
      // 要求瀏覽器在下次重繪之前調(diào)用 backTop 回調(diào)函數(shù)更新動(dòng)畫
      window.requestAnimationFrame(backTop)
      window.scrollTo(0, s - s / 8)
    }
}
// 是否顯示返回頂部
useEffect(() => {
    const handleScroll = () => {
        if (window.scrollY > window.innerHeight) {
            onShow(true)
        } else {
            onShow(false)
        }
    }
    document.addEventListener('scroll', handleScroll)
    return () => document.removeEventListener('scroll', handleScroll)
}, [show])
 
// html
{show && (
    <div className="arrow-up" onClick={backTop}>
      <img src={require('@/assets/images/arrow.png')} />
    </div>
)}

window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個(gè)動(dòng)畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫。該方法需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會(huì)在瀏覽器下一次重繪之前執(zhí)行。

到此這篇關(guān)于使用react完成點(diǎn)擊返回頂部操作的文章就介紹到這了,更多相關(guān)react返回頂部內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: