Добавить кнопку с прокруткой вверх (Ionic 2 | Typcript)

Question

Привет всем, я пытаюсь добавить «прокрутить до верхней кнопки». которые реализуют следующее:

1.Нажмите кнопку, когда пользователь прокрутил вниз. 2.Нажмите кнопку, когда пользователь прокручивается вверх. 3.Если кнопка нажата, прокрутите вверх и скройте кнопку. любое предложение, как сделать правильный путь?

Большое спасибо

Answer 1

Plunker Demo

Чтобы сделать эту работу вам нужно:

• Создать функцию, которая прокручивает ваш scroll-content элемент в верхней
• Track позиции прокрутки 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); 

Track 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> 

Полный компонент Машинопись

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> 

Answer 2

Упрощая scrollToTop() от adriancarriger

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/

Answer 3

С помощью adriancarriger кода, я попытался следующие установить Div элемент в начало, и она работала. Ниже мой код

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 
     }); 
} 

Answer 4

Вы могли бы попробовать это.Надеясь это помогает

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

import { Content } from 'ionic-angular'; 

@Component({...}) 

export class MyPage{ 

    @ViewChild(Content) content: Content; 

    scrollToTop() { 

    this.content.scrollToTop(); 
    } 

} 

Answer 5

Когда у вас компонента внутри компонента, вы можете иметь проблемы с получением содержимого внутри внутреннего компонента. Это сказало, что я должен был получить верхний элемент и вызвать свиток.

В моем случае было переход к следующему слайду, я должен был быть наверху для следующего слайда.

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