负离子电路

负离子电路

I am sure that you have come across a situation where a user presses a button in your web app and you want the app to scroll to a particular section in your app. The animation looks great, but how do you achieve this effect?

我确定您遇到过这样的情况：用户按下Web应用程序中的按钮，并且希望该应用程序滚动到应用程序中的特定部分。 动画看起来很棒，但是如何实现这种效果？

Since Ionic Angular was built with HTML and TypeScript, this effect can be achieved by borrowing a similar concept from HTML and regular JavaScript.

由于Ionic Angular是使用HTML和TypeScript构建的，因此可以通过借鉴HTML和常规JavaScript中的类似概念来实现此效果。

For this particular project, I will be building the Ionic application using the following versions: Ionic CLI version 6.11.8, Ionic version 5.

对于这个特定的项目，我将使用以下版本构建Ionic应用程序：Ionic CLI版本6.11.8，Ionic版本5。

第1步 (Step 1)

Set your target on a page with ID. In this example, I am setting the target to an <ion-item> with the ID #theTarget on line 25 in home.page.html. In addition to this, I have also added a button on line 12 which we will use later.

将目标设置在具有ID的页面上。 在这个例子中，我设定目标到<ion-item>与该ID #theTarget上线25在home.page.html 。 除此之外，我还在第12行添加了一个按钮，稍后我们将使用它。

第2步 (Step 2)

In the home.page.ts, you will then need to import and use ViewChild and IonContent like so on line 1 and declare it on line 13. You can then create a function and using .scrollToPoint as per below in line 21

然后，在home.page.ts ，您需要像在第1行那样导入和使用ViewChild和IonContent ，并在第13行进行声明。然后，您可以按照下面第21行的方法创建函数并使用.scrollToPoint

第三步 (Step 3)

If you noticed on line 21, I have added a little offset to the position. This is done by adding a little bit of an offset to the scrollToPoint with the following:

如果您在第21行注意到了，我已对该头寸添加了一些补偿。 这是通过使用以下代码向scrollToPoint添加一点偏移量来完成的：

this.target.nativeElement.offsetTop - 40

This can be adjusted to how you feel it would fit into your app.

您可以根据自己的喜好调整它，使其适合您的应用。

And that’s it!

就是这样！

普通英语JavaScript (JavaScript In Plain English)

Did you know that we have three publications and a YouTube channel? Find links to everything at plainenglish.io!

您知道我们有三个出版物和一个YouTube频道吗？ 在plainenglish.io上找到所有内容的链接！

翻译自: https://medium.com/javascript-in-plain-english/how-to-auto-scroll-to-a-target-area-in-ionic-angular-587f9888d9db

负离子电路

相关资源：微信小程序源码-合集6.rar