Добавление в кнопку прокрутки с помощью Ionic React - PullRequest
Новая
       56

Добавление в кнопку прокрутки с помощью Ionic React

2 голосов
/ 06 ноября 2019

Я пытаюсь добавить кнопку, которая прокручивается вверх страницы, используя Ionic React. Пока это часть моего кода - 

...
function scrollToTop() {
    return document.getElementById("page")!.scrollTop;
}

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
            <IonButtons slot="start">
                <IonMenuButton />
            </IonButtons>
            <IonTitle slot="end">Ionic Template - JB</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent id={"page"}>
        <IonCard  className="welcomeImage">
            <img src="/assets/welcomeBacking.jpg" alt=""/>
            <IonCardHeader>
                <IonCardTitle>Welcome!</IonCardTitle>
                <IonCardSubtitle>To this Ionic Template</IonCardSubtitle>
            </IonCardHeader>
            <IonCardContent>
                Lorem ipsum........
            </IonCardContent>
        </IonCard>
        {/*Checklist*/}
        <IonList>
            {form.map(({val, isChecked, isDisabled}) => (
                <IonItem key={val}>
                    <IonLabel>{val}</IonLabel>
                    <IonCheckbox slot={"start"} value={val} checked={isChecked} disabled={isDisabled} />
                </IonItem>
                ))}
        </IonList>
          <IonButton onClick={scrollToTop}>Scroll to top</IonButton>
      </IonContent>
    </IonPage>
  );
};

Функция scrollToTop должна прокручиваться до верхней части элемента с идентификатором 'page', но это не так. Я не получаю никаких ошибок при нажатии на кнопку, вместо этого ничего не происходит.

Я знаю, что это простая вещь для реализации в Angular, но у меня возникают проблемы с использованием React для этого. Любая помощь будет большой благодарностью.

1 Ответ

1 голос
/ 06 ноября 2019

Вы можете сделать это с помощью scrollToTop метода IonContent , но сначала необходимо включить scrollEvents. В ионной реакции, методы могут быть доступны с помощью refs. Не выглядит много реакции, но, по крайней мере, пока это работает. 

........    
import React, {useRef} from 'react';

const Home: React.FC = (props) => {
    const contentRef = useRef(null);
    const scrollToTop= () => {
        // @ts-ignore
        contentRef.current.scrollToTop();
    };
    return (
        .....
        <IonContent ref={contentRef} scrollEvents={true}>
            ................
            <IonButton onClick={()=>scrollToTop()}>Scroll to top</IonButton>
        </IonContent>
        .....
    );
};
...