[英]ionic react, scroll to specific list item
Ionic Scroll To Specific List Item is about Ionic + Angular. Ionic Scroll To Specific List Item是关于 Ionic + Angular。 The answer is specific to AngularJS.答案特定于 AngularJS。
I would like to ask the same question, but specific to Ionic + React:我想问同样的问题,但具体到 Ionic + React:
With layout like this:像这样的布局:
<IonContent>
<IonList>
<IonItem key={1}>1</IonItem>
<IonItem key={2}>2</IonItem>
<IonItem key={3}>3</IonItem>
<IonItem key={4}>4</IonItem>
<IonItem key={5}>5</IonItem>
</IonList>
</IonContent>
How can I scroll to a specific list item?如何滚动到特定的列表项?
const App = () => {
const [text, setText] = useState("");
const gotoButton = () => {
let y = document.getElementById("row-" + text).offsetTop;
console.log(y);
let content = document.querySelector("ion-content");
content.scrollToPoint(0, y);
};
return (
<IonApp>
<IonHeader>
<IonToolbar>
<IonButton onClick={() => gotoButton()}>GOTO ROW</IonButton>
<IonInput
value={text}
placeholder="Enter Row Number"
onIonChange={e => setText(e.detail.value)}
/>
</IonToolbar>
</IonHeader>
<IonContent
className="ion-padding"
scrollEvents={true}
onIonScrollStart={_e => {
console.log(_e);
}}
onIonScroll={() => {}}
onIonScrollEnd={() => {}}
>
{/* <!-- LIST --> */}
<IonList>
{Array(200)
.fill()
.map((v, index) => {
return (
<IonItem id={"row-" + index} key={index}>
{index + ""}
</IonItem>
);
})}
</IonList>
<button id="btn" />
</IonContent>
</IonApp>
);
};
export default App;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.