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

第

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

首先我们先写返回顶部的样式

然后绑定一个点击事件，滚动到顶部

BackTopps.toTop}返回/BackTop

toTop(){

????console.log(111)

????window.scrollTo(0,0)

??}

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

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

showTop:false

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

constmapStateToProps=(state)={

return{

showTop:ponents.get(showTop)

//通过三元控制显示隐藏

ps.showTopBackTopps.toTop}返回/BackTop:null

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

//在componentDidMount中监听事件

componentDidMount(){

this.bindEvents();

//然后监听

bindEvents(){

window.addEventListener(scroll,ps.changeScrollTop)

//在mapDispatch中将数据传递给store，并且判断滚动到什么地方派发

constmapDispatchToProps=(dispatch)={

return{

changeScrollTop(){

if(document.documentElement.scrollTop400){

dispatch(actionCreators.changeScrollShow(true))

}else{

dispatch(actionCreators.changeScrollShow(false))

在actionCreators定义changeScrollShow方法

exportconstchangeScrollShow=(show)=({

type:actionTypes.CHANGE_SCROLL_SHOW,

show

最后在reducer中定义就可以啦

if(action.type===actionTypes.CHANGE_SCROLL_SHOW){

returnstate.set(showTop,action.show)

react缓慢返回顶部

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

const[show,onShow]=useState(false)

//返回顶部

constbackTop=()={

consts=document.documentElement.scrollTop||document.body.scrollTop

if(s0){

//要求浏览器在下次重绘之前调用backTop回调函数更新动画

window.requestAnimationFrame(backTop)

window.scrollTo(0,s-s/8)

//是否显示返回顶部

useEffect(()={

consthandleScroll=()={

if(window.scrollYwindow.innerHeight){

onShow(true)

}else{

onShow(false)

document.addEventListener(scroll,handleScroll)

return()=document.removeEventListener(scroll,handleScroll)

},[show])

//html

{show(

divclassName=arrow-upbackTop}

imgsrc={require(@/assets/images/arrow.png)}/

/div

window.requestAnimationFrame()告诉浏览器