web-dev-qa-db-ja.com

トップボタンにスクロールを追加します（Ionic 2 | TypeScript）

みなさん、こんにちは。「トップボタンにスクロール」を追加しようとしています。以下を実装します：

1.ユーザーが下にスクロールしたときにボタンを表示します。 2.ユーザーが上にスクロールしたらボタンを非表示にします。 3.ボタンがタップされている場合は、一番上までスクロールしてボタンを非表示にします。どのようにそれを正しい方法にするかについての提案はありますか？

どうもありがとう

cordovatypescriptangularionic2
9
David

プランカーデモ

この作業を行うには、次のことを行う必要があります。

  • scroll-content要素を一番上にスクロールする関数を作成します
  • scroll-contentのスクロール位置を追跡します
  • *ngIfが特定のしきい値に達した後に条件付きで表示するには、上にスクロールボタンでscroll-contentを使用します。

一番上の機能までスクロール

this SO answer をscroll-content要素に適用するように適合させました

scrollToTop(scrollDuration) {
let scrollStep = -this.ionScroll.scrollTop / (scrollDuration / 15);
let scrollInterval = setInterval( () => {
    if ( this.ionScroll.scrollTop != 0 ) {
        this.ionScroll.scrollTop = this.ionScroll.scrollTop + scrollStep;
    } else {
      clearInterval(scrollInterval);
    }
}, 15);

トラックscroll-contentの位置

この例では、次のように上にスクロールボタンを表示するためのしきい値としてウィンドウの高さを使用しています。

this.ionScroll.addEventListener("scroll", () => {
  if (this.ionScroll.scrollTop > window.innerHeight) {
    this.showButton = true;
  } else {
    this.showButton = false;
  }
});

ボタンのHTML

<button *ngIf="showButton" (click)="scrollToTop(1000)">Scroll Top</button>

フルコンポーネントTypeScript

import { NavController } from 'ionic-angular/index';
import { Component, OnInit, ElementRef } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage implements OnInit {
  public ionScroll;
  public showButton = false;
  public contentData = [];

  constructor(public myElement: ElementRef) {}

  ngOnInit() {
    // Ionic scroll element
    this.ionScroll = this.myElement.nativeElement.children[1].firstChild;
    // On scroll function
    this.ionScroll.addEventListener("scroll", () => {
      if (this.ionScroll.scrollTop > window.innerHeight) {
        this.showButton = true;
      } else {
        this.showButton = false;
      }
    });
    // Content data
    for (let i = 0; i < 301; i++) {
      this.contentData.Push(i);
    }
  }
  // Scroll to top function
  // Adapted from https://stackoverflow.com/a/24559613/5357459
  scrollToTop(scrollDuration) {
    let scrollStep = -this.ionScroll.scrollTop / (scrollDuration / 15);
    let scrollInterval = setInterval( () => {
        if ( this.ionScroll.scrollTop != 0 ) {
            this.ionScroll.scrollTop = this.ionScroll.scrollTop + scrollStep;
        } else {
          clearInterval(scrollInterval);
        }
    }, 15);
  }

}

フルコンポーネントHTML

<ion-navbar primary *navbar>
  <ion-title>
    Ionic 2
  </ion-title>
  <button *ngIf="showButton" (click)="scrollToTop(1000)">Scroll Top</button>
</ion-navbar>

<ion-content class="has-header" #testElement>
  <div padding style="text-align: center;">
    <h1>Ionic 2 Test</h1>
    <div *ngFor="let item of contentData">
      test content-{{item}}
    </div>
  </div>
</ion-content>
7
adriancarriger

adriancarrigerからscrollToTop()を単純化する

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

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

ソース： http://ionicframework.com/docs/v2/api/components/content/Content/

9
José Nicodemos Maia Neto

あなたはこれを試すことができます。それが役立つことを願っています

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

import { Content } from 'ionic-angular';

@Component({...})

export class MyPage{

  @ViewChild(Content) content: Content;

  scrollToTop() {

    this.content.scrollToTop();
  }

}
2
jagadeesh

Adriancarrigerコードの助けを借りて、Div要素をTopに設定するために次のことを試みましたが、うまくいきました。以下は私のコードです

Html

<div  #Innholdtext >
<p> add your contents here to set scroll top </>
</div>

app.component.ts

import { Component, OnInit,  ViewChild, ElementRef } from '@angular/core';
export class app implements OnInit {

@ViewChild('Innholdtext') private hovedInnhold : ElementRef;
    private scrollElement; 
}

   ngOnInit() {
  this.scrollElement = this.hovedInnhold.nativeElement;
        this.scrollElement.addEventListener("click", () =>{
            this.hovedInnhold.nativeElement.scrollTop = 0
        });
}
0
Savitha

コンポーネント内にコンポーネントがある場合、内部コンポーネント内にコンテンツを取得する際に問題が発生する可能性があります。つまり、上の要素を取得して、スクロールするように呼び出す必要がありました。

私の場合、次のスライドに行くとき、次のスライドのために一番上にいなければなりませんでした。

 const element = document.querySelector(".slide-zoom");
      setTimeout(() => { if(element) element.scrollIntoView(true) }, 200);
0
mariomol