动态调整可滚动内容的高度(Ion Page、React)
P粉478835592
P粉478835592 2023-09-07 18:08:44
0
1
615

假设您的 ionic React 页面中有一些文本非常大,因此您希望它滚动而不是填充整个页面,那么以下样式将有很大帮助:

<div  style={{ overflow: 'auto', flex: '1 1 auto', height: '200px'}}>
Some Text
</>

但是我们假设,我有一个包含一些内容和页脚的页面,例如像这样:

<IonPage>
      <IonContent>
        <h2>Search Detail Page</h2>
        <IonItem>
          Some Search Result Details
        </IonItem>

        <h1> Description</h1>
        <div  style={{ overflow: 'auto', flex: '1 1 auto'}}>
          <p>This is the content that matters to me. I want this to scroll when this description gets so long, that the footer would start covering it</p>
          <p>Now let's put a whole lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: </p>
        </div>
      </IonContent>

      <IonFooter>
        <IonToolbar>
          Some shiny footer content
        </IonToolbar>
      </IonFooter>
    </IonPage>

在手机上,它看起来像这样:

请注意,描述内容不可滚动,因为 dev 的高度不受限制。问题是,我们需要定义一个“最大高度”,但我们不能这样做,因为页面大小会因不同设备而异,而且它取决于页脚高度。

有什么建议吗?这似乎是一个常见问题,但我找不到答案。

我尝试过这个:

  useEffect(() => {
    setTimeout(() => {
      const h2Height = document.querySelector('h2').clientHeight;
      const itemHeight = document.querySelector('ion-item').clientHeight;

      console.log('Header Height:', h2Height); // sadly, this is 0 at init time. But then works on reload
      console.log('Item Height:', itemHeight);


      if (descriptionRef.current) {
        descriptionRef.current.style.height = `calc(100% - ${h2Height + itemHeight}px - 2em)`;
      }
    }, 100); // we need this 100ms timeout, since otherwise the heights are not available and equals 0 at load time
  }, []);

//...
<h1> Description</h1>
<div ref={descriptionRef}>Some very long detailed description</div>

这仅在我重新加载页面时有效,因为在第一次加载时,h2HeigthitemHeight 都显示为 0

P粉478835592
P粉478835592

全部回复(1)
P粉343408929

我最终添加了这个 css 类:

.scroll-content {
  max-height: calc(100% - 60px);
  overflow: auto;
  flex: 1 1 auto;

  p {
    margin-bottom: 3em;
  }
}

然后在我的页面中:

<div className={'scroll-content'}>
  <p>{searchResult?.description}</p>
</div>

说明:calc(100% - 60px) 是整个内容减去滚动内容之外所有内容的高度。 (显然,页脚不算)

这适用于我的目标设备。然而,这是一个相当不令人满意的解决方案,因为一旦我向页面添加内容,它就会中断,除非我碰巧记得更新差异值

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!