日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

使用react完成點擊返回頂部操作_React

作者：mini74 ? 更新時間： 2023-05-21 編程語言

首先我們先寫返回頂部的樣式
然后綁定一個點擊事件，滾動到頂部

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

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

這樣就可以實現點擊返回到頂部了。

接下來我們要寫滾動到一定距離出現，那么我們就需要在reducer.js中定義一個默認數據

showTop:false

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

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

這時候就需要去監聽，頁面滾動的距離，直到頁面滾動到一定距離時，派發action給store，最后改變reducer中的數據，從而達到目的

//在componentDidMount中監聽事件
    componentDidMount() {
        this.bindEvents();
    }
//然后監聽
bindEvents() {
    window.addEventListener("scroll", this.props.changeScrollTop)
}
//在mapDispatch中將數據傳遞給store，并且判斷滾動到什么地方派發
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緩慢返回頂部

功能描述：到一定距離顯示 返回頂部按鈕 ，點擊返回頂部，通過 requestAnimationFrame 調用 backTop 回調函數 緩慢返回到頂部

const [show, onShow] = useState(false)
// 返回頂部
const backTop = () => {
    const s = document.documentElement.scrollTop || document.body.scrollTop
    if (s > 0) {
      // 要求瀏覽器在下次重繪之前調用 backTop 回調函數更新動畫
      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() 告訴瀏覽器——你希望執行一個動畫，并且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數，該回調函數會在瀏覽器下一次重繪之前執行。

原文鏈接：https://blog.csdn.net/mini74/article/details/105158591

  • 上一篇：沒有了
  • 下一篇：沒有了
欄目分類
最近更新