原码笔记

原码笔记

使用react完成点击返回顶部操作

小诸哥 0

首先我们先写返回顶部的样式
然后绑定一个点击事件,滚动到顶部

  1. BackTop onClick={this.props.toTop}>返回</BackTop>
  2.  
  3. toTop(){
  4.      console.log(111)
  5.      window.scrollTo(0,0)
  6.      }

这样就可以实现点击返回到顶部了。

接下来我们要写滚动到一定距离出现,那么我们就需要在reducer.js中定义一个默认数据

  1. showTop:false

在index.js中使用mapStateToProps接受这个值,并且使用三元运算通过控制showTop的值来控制显示隐藏

  1. const mapStateToProps = (state) =>{
  2.          return {
  3.              showTop:state.components.get('showTop')
  4.          }
  5.      }
  6. //通过三元控制显示隐藏
  7. {
  8.      this.props.showTop ? &lt;BackTop onClick={this.props.toTop}>返回</BackTop> : null
  9.      }

这时候就需要去监听,页面滚动的距离,直到页面滚动到一定距离时,派发action给store,最后改变reducer中的数据,从而达到目的

  1. //在componentDidMount中监听事件
  2.      componentDidMount() {
  3.          this.bindEvents();
  4.      }
  5. //然后监听
  6. bindEvents() {
  7.      window.addEventListener("scroll", this.props.changeScrollTop)
  8. }
  9. //在mapDispatch中将数据传递给store,并且判断滚动到什么地方派发
  10. const mapDispatchToProps = (dispatch) =>{
  11.      return{
  12.              changeScrollTop() {
  13.                  if(document.documentElement.scrollTop > 400){
  14.                      dispatch(actionCreators.changeScrollShow(true))
  15.                  }else {
  16.                      dispatch(actionCreators.changeScrollShow(false))
  17.                  }
  18.              }
  19.          }
  20.      }

在actionCreators定义changeScrollShow方法

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

最后在reducer中定义就可以啦

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

react缓慢返回顶部

功能描述:到一定距离显示 返回顶部按钮 ,点击返回顶部,通过 requestAnimationFrame 调用 backTop 回调函数 缓慢返回到顶部

  1. const [show, onShow] = useState(false)
  2. // 返回顶部
  3. const backTop = () => {
  4.      const s = document.documentElement.scrollTop || document.body.scrollTop
  5.      if (> 0) {
  6.          // 要求浏览器在下次重绘之前调用 backTop 回调函数更新动画
  7.          window.requestAnimationFrame(backTop)
  8.          window.scrollTo(0, s - s / 8)
  9.      }
  10. }
  11. // 是否显示返回顶部
  12. useEffect(() => {
  13.      const handleScroll = () => {
  14.          if (window.scrollY > window.innerHeight) {
  15.              onShow(true)
  16.          } else {
  17.              onShow(false)
  18.          }
  19.      }
  20.      document.addEventListener('scroll', handleScroll)
  21.      return () => document.removeEventListener('scroll', handleScroll)
  22. }, [show])
  23.     
  24. // html
  25. {show && (
  26.      <div className="arrow-up" onClick={backTop}>
  27.          <img src={require('@/assets/images/arrow.png')} />
  28.      </div>
  29. )}

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

标签: react