标签: ion-content

在 Ionic v3 ion-content 中，有像“scrollTop”这样的属性。在 Ionic v4 中不再有这些属性......我如何确定用户是否到达了内容的末尾？

https://ionicframework.com/docs/v3/api/components/content/Content/ https://ionicframework.com/docs/api/content

我想在离子内容上有或没有滚动条时隐藏或显示元素。更具体地说，我想在没有滚动条时显示一个按钮（以在列表中加载更多项目）并将其隐藏在有滚动条的地方（因此更多项目的加载是通过 ion-infinite-scroll 完成的）。

我的 Ionic 应用程序也将部署到桌面，因此大屏幕用户最初不会看到滚动条，因此不会触发 ion-infinite-scroll。

这是一个演示该问题的演示：

主页.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic header
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <p *ngFor="let item of itemList">{{ item }}</p>

    <!-- How to hide this button when ion-content has a scrollbar? -->
    <!-- *ngIf="???" -->
    <ion-button (click)="incrementItemList(5)">Load more items</ion-button>
  </div>

  <ion-infinite-scroll (ionInfinite)="loadMoreItems($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>
      Ionic footer
    </ion-title>
  </ion-toolbar>
</ion-footer>

主页.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage { …

我使用 Ionic4 和 Angular8。

我想在智能手机上捏合/捏合屏幕。

我尝试过以下描述已添加到index.html中。

<meta name = "viewport" content = "viewport-fit = cover, width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 4.0, user-scalable = yes" />

但事与愿违，在真机上并没有运行。

我也尝试过。

已添加以下内容。

scrollX = "true"

然后，您现在可以在智能手机上捏合/捏合屏幕。但我不知道为什么，也不知道为什么。

另外，如果 的高度足够大以至于需要垂直滚动，我在捏合屏幕后无法水平滚动。

我不知道为什么。我想在屏幕放大后使水平滚动起作用。

如果有人知道怎么做，请告诉我。