首先先说明一下我做的这个跳转发生的情况:

     页面有主要有两个子组件,这两类子组件都是用了同一个异步加载回来的数据,a类组件在前,b类组件在后,a类组件比b类组件多调用了一个异步数据。
a类组件不定宽度(因为可能有图,可能没图),b类组件定宽。

1、因为是异步加载来的数据,不能直接通过地址里的#xxxx来跳转,因为跳转的时候数据还没有加载回来

2、本来我是想直接在react的didmount里用scrollIntoView来干的,但是因为页面中我渲染那些异步加载回来的数据还用了别的组件,
     无法保证scrollIntoView的时候那个组件已经渲染上了。

3、于是我就直接在循环渲染子组件中做了个判断,判断该组件是不是我就要找的组件,如果是的话,向父组件返回一个状态值,

      判断该进行跳转。但是后来又遇到了一个问题,就是在手机端上看的时候,会发现页面跳转到目标位置后,又会向上滚动到

      其他位置。

4、后来上网查了很多资料,发现是因为a的宽度发生了变化引起的。 页面发生滚动的时候,a类组件里,可能有些图片数据信息还没有加载回来,等滚动完
     后,图片加载出来了,a类组件宽度增加,自然就会发生页面上滚情况。

5、所以后来我的最终解决方案是:设置两个状态值,一个是b类组件中对应要找的目标已经加载完(在b类的didmount里判端,确保滚动的时候一定能找到目标),另外一个是在a类组件里,
      对那个a类才调用的数据接口做一个判断,判断数据是否已经回来了。当这两个状态值都为true时,再进行scrollIntoView。

posted on 2018-01-21 22:49  lxy02  阅读(505)  评论(0编辑  收藏  举报