Question

当我单击选项卡按钮并且已经在此页面中时，我需要滚动到页面顶部

我尝试过：

 @ViewChild(IonContent,  { static: false }) private content: IonContent;

myMethod() {
 this.content.scrollToTop();
}

但是这不起作用，我尝试将其放在目标页面的ioViewWillEnter中，但仍然只在ionic 4中才第一次起作用

我还尝试将其放在离子选项卡的ionTabsDidChange事件中，但仅在选项卡更改时才会触发此事件

Answer 1

我认为您要求进行棘手的操作，因为这不是标准的处理方式。

通常，按钮不执行任何操作，这会使用户意识到他们已经在该选项卡上。

我设置了一个演示项目，并尝试了各种内置事件，但最终private lateinit var exampleBinding: ActivityExampleBinding //activity_example.xml layout private lateinit var mergeBinding: MergeLayoutBinding //merge_layout.xml layout override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) exampleBinding = ActivityExampleBinding.inflate(layoutInflater) //we need to bind the root layout with our binder for external layout mergeBinding = MergeLayoutBinding.bind(exampleBinding.root) setContentView(loginBinding.root) //we will be able to access included in merge layout views like this val mergedView: View = mergeBinding.someView //[...] }发出了tab-button事件，并且到达了{{ 1}}组件，因为它是同一标签而被驳回：

https://github.com/ionic-team/ionic/blob/master/core/src/components/tabs/tabs.tsx#L164

有效的方法是将点击事件添加到click中的标签按钮中：

shouldChange

我认为通过使用该点击处理程序，您可以抓取当前标签，并调度自己的事件：

tabs

本指南显示了如何使用Ionic Events系统，该系统使您可以将自定义事件传递给系统中的其他组件：

https://alligator.io/ionic/events/

因此，您可以使用它来发出自定义的“从顶部滚动”事件，并在选项卡中处理该事件。然后在该自定义事件处理程序中使用原始的tabs.page.html代码。

例如，在标签页面中您要滚动添加：

<ion-tabs>
  <ion-tab-bar slot="bottom">
    {{ snip }}

    <ion-tab-button tab="tab2" (click)="tabButtonClicked('tab2')">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    {{ snip }}
  </ion-tab-bar>

</ion-tabs>

单击选项卡按钮时，IONIC 4滚动到顶部

1 个答案: