添加带有Ionic Reaction的滚动按钮 [英] Adding in a scroll button with Ionic React

问题描述

我正在尝试添加一个使用Ionic Reaction滚动到页面顶部的按钮。 到目前为止，这是我代码的一部分-

...
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函数应该滚动到id为‘page’的元素的顶部，但它没有。我在单击该按钮时没有收到任何错误，相反，根本没有任何反应。

我知道在角度上实现这是一件微不足道的事情，但我在使用Reaction时遇到了问题。任何帮助都是非常感谢的。

推荐答案

可以通过IonContent的scrollToTop方法实现，但必须先开启scrollEvents。在Ionic Reaction中，可以使用refs访问这些方法。看起来没有太大反应，但至少目前可以用。

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

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

这篇关于添加带有Ionic Reaction的滚动按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！