離子2中的長磁盤頁面

Question

嘿，我需要你的幫助，

已開始在離子2應用程序上工作。我的導航並不複雜。我有一個菜單，如果我點擊一個項目另一個菜單與子菜單打開，如果我點擊子菜單中的項目第三頁應該呈現在它上面，這工作真的很好。現在，第三項活動應該是一個非常長的滾動網站，其中有很多部分（各部分相互重疊）。每個部分都應該有一個帶有一個後退按鈕的工具欄，以返回到上一個或下一個部分的子菜單和兩個箭頭鍵。

這裏的小圖片

現在我的問題：

我如何能實現磁一部分？我認爲它是這樣的：酒吧坐在頁面的頂部和內容之上。當我滾動內容下面，我可以滾動到結束。當我結束時，一切都應該停止，當我進一步拉動下一個部分欄跳到我的網站的頂部。

我希望你能幫助我謝謝;）

Answer 1

Plunker Demo

爲了使這項工作，你需要：

• 創建滾動您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> 

全部組件打字稿

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>