首先我们先写返回顶部的样式
然后绑定一个点击事件,滚动到顶部
- BackTop onClick={this.props.toTop}>返回</BackTop>
-
- toTop(){
- console.log(111)
- window.scrollTo(0,0)
- }
这样就可以实现点击返回到顶部了。
接下来我们要写滚动到一定距离出现,那么我们就需要在reducer.js中定义一个默认数据
在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)
- }
功能描述:到一定距离显示 返回顶部按钮 ,点击返回顶部,通过 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
版权声明:本站所有图片/内容除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!