添加带有Ionic Reaction的滚动按钮
我正在尝试添加一个使用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>
.....
);
};
相关文章