使用react完成点击返回顶部操作
作者：mini74
本文主要介绍了使用react完成点击返回顶部操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
首先我们先写返回顶部的样式
然后绑定一个点击事件，滚动到顶部
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() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
到此这篇关于使用react完成点击返回顶部操作的文章就介绍到这了,更多相关react返回顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！