Ionic 当页面缩小时，离子元素会失去原来的位置

zlwx9yxi 于 2022-12-08 发布在 Ionic

关注(0)|答案(1)|浏览(183)

在这个StackBlitz项目中：https://stackblitz.com/edit/ionic-react-demo-s368kk?file=App.jsx
下面的代码：

import React from 'react';
import { IonPage, IonContent, IonRow } from '@ionic/react';

const Button = ({ children }) => (
  <div
    style={{
      display: 'inline-block',
      backgroundColor: '#fff',
      padding: '12px 22px',
      margin: '10px 10px',
    }}
  >
    <span>{children}</span>
  </div>
);

const OptionsButtons = () => (
  <div style={{ textAlign: 'center' }}>
    <div>
      <Button>This is your Option Number 1</Button>
    </div>
    <div>
      <Button>This is your Option Number 2</Button>
    </div>
  </div>
);

const Delimiter = () => (
  <div>
    <span style={{ color: '#ff0' }}>==============================</span>
  </div>
);

const App = () => (
  <IonPage>
    <IonContent
      fullscreen
      className=""
      style={{
        '--ion-background-color': 'none',
        backgroundImage: `url('https://wallpaperaccess.com/full/1902544.jpg')`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
      }}
    >
      <IonRow
        style={{
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <OptionsButtons />
        <Delimiter />
        <OptionsButtons />
        <Delimiter />
        <OptionsButtons />
        <Delimiter />
        <OptionsButtons />
      </IonRow>
    </IonContent>
  </IonPage>
);

export default App;

通常情况下，当页面有足够的空间时，其外观如下图所示：

请注意元素垂直对齐（这是我的要求）。

但如果我减小视口大小，元素会重新组织，并丢失其初始位置，如下图所示：

我真的需要元素保持原来的位置，因为它们有足够的空间。如果用户必须向下滚动才能看到折叠后的元素，这并不重要。但请记住，当有足够的空间时，我需要元素垂直对齐。
有什么解决办法吗？
如果你愿意，你可以发布你的分叉StackBlitz。
谢谢你！

ionic-framework

来源：https://stackoverflow.com/questions/74354867/ionic-elements-lost-their-original-position-when-the-page-decreases-its-size

1条答案

按热度按时间

y53ybaqx1#

IonRow元素应该在IonGrid内部使用。在外部，它可能会显示错误的行为。请尝试以下操作：

import React from 'react';
import { IonPage, IonContent, IonRow, IonGrid } from '@ionic/react';

const Button = ({ children }) => (
  <div
    style={{
      display: 'inline-block',
      backgroundColor: '#fff',
      padding: '12px 22px',
      margin: '10px 10px',
    }}
  >
    <span>{children}</span>
  </div>
);

const OptionsButtons = () => (
  <div style={{ textAlign: 'center' }}>
    <div>
      <Button>This is your Option Number 1</Button>
    </div>
    <div>
      <Button>This is your Option Number 2</Button>
    </div>
  </div>
);

const Delimiter = () => (
  <div>
    <span style={{ color: '#ff0' }}>==============================</span>
  </div>
);

const App = () => (
  <IonPage>
    <IonContent
      fullscreen
      className=""
      style={{
        '--ion-background-color': 'none',
        backgroundImage: `url('https://wallpaperaccess.com/full/1902544.jpg')`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
      }}
    >

        <IonGrid>
          <IonRow
            style={{
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <OptionsButtons />
            <Delimiter />
            <OptionsButtons />
            <Delimiter />
            <OptionsButtons />
            <Delimiter />
            <OptionsButtons />
          </IonRow>
      </IonGrid>
    </IonContent>
  </IonPage>
);

export default App;

另外，不使用IonCol也可能会导致一些错误，我建议在这种情况下不要使用离子网格系统，或者这样使用：

<IonGrid style={{
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
          <IonRow>
            <IonCol>
              <OptionsButtons />
              <Delimiter />
            </IonCol>
            </IonRow>
            <IonRow>
            <IonCol>
              <OptionsButtons />
              <Delimiter />
            </IonCol>
            </IonRow>
            <IonRow>
            <IonCol>
              <OptionsButtons />
              <Delimiter />
            </IonCol>
          </IonRow>
      </IonGrid>

赞(0）回复(0）举报 2022-12-08

我来回答

Ionic 当页面缩小时，离子元素会失去原来的位置

1条答案

相关问题

热门标签

最新问答