boundingClientRect和rootBounds的x,y,width,height,top,bottom都为0

使用IntersectionObserver实现分页加载数据时打印boundingClientRect和rootBounds的x,y,width,height,top,bottom都为0

如图点击已支付tab后，在我下拉想要加载下一页数据时，一直加载不出来，然后打印了entries后发现上面的问题

原因：

• 查看了两个tab下的entries后，发现entries—>target并没有获取到已支付tab下lists的#mk-loading元素，boundingClientRect和rootBounds的x,y,width,height,top,bottom都为0，即没有根元素和目标元素矩形区域。
• 因为antd-mobile的tabs模块点击后未支付的tabs-content样式变为display:none，而已支付的 tabs-content的样式为display:block，但此时两个tabs-content下都有#mk-loading元素，entries—>target获取到的是第一个隐藏的未支付的#mk-loading元素
  
  （图上框为未支付tab下的entries，图下框为已支付tab下的entries）

解决：当点击对应tab后隐藏之前tabs-content下的#mk-loading元素，不在dom中显示

• 父组件

const [isShow, setIsShow] = useState('no-pay')
...
let tabs = [
        {
            key: '0',
            title: '未支付',
            cont: <Lists isShow={isShow} .../>
        },
        {
            key: '1',
            title: '已支付',
            cont: <Lists isShow={isShow} ... />
        }
    ]
...
 const handleChange = (key) => {
        ...
        setShowLoading(true);
        if (isShow === 'no-pay') {
            setIsShow('pay')
        } else {
            setIsShow('no-pay')
        }
 }
    ...
     <Tabs onChange={handleChange}>
          {tabs.map(item => (
             <Tabs.Tab title={item.title} key={item.key}>
                 {item.cont}
             </Tabs.Tab>
        ))}
    </Tabs>

• 子组件
  如果点击了已支付tab则隐藏掉未支付的loading，只显示已支付的loading

...
{
     props?.isShow === 'pay' && <ShowLoading showLoading={props.showLoading} /> />
}
{
     props?.isShow === 'no-pay' && <ShowLoading showLoading={props.showLoading} /> />
}
...

更多文章可访问博客