Ionic 2 中的长磁性滚动页面

Question

大家好，我需要你的帮助，

开始开发 Ionic 2 应用程序。我的导航没有那么复杂。我有一个菜单，如果我单击一个项目，另一个菜单将打开一个子菜单，如果我单击子菜单中的一个项目，第三页应该在它上面呈现，这真的很好。现在第三个活动应该是一个非常长的滚动站点，其中包含很多部分（这些部分相互重叠）。每个部分都应该有一个工具栏，一个返回按钮可以返回子菜单，两个箭头键用于上一个或下一个部分。

这是一张小图

现在我的问题：

我怎样才能实现磁性部分？我认为是这样的：Bar 位于页面顶部和内容之上。当我滚动内容时，我可以滚动到最后。当 iam 结束时，一切都应该停止，当我拉得更远时，下一个部分栏会跳到我的网站顶部。

希望你能帮我谢谢;)

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>

全组件 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>