大家好我想添加"滚动到顶部按钮。"实现以下内容:
1.用户向下滚动时显示按钮。 2.当用户向上滚动时隐藏按钮。 3.如果点击按钮,则滚动到顶部并隐藏按钮。 如何以正确的方式提出任何建议?
非常感谢
答案 0 :(得分:8)
从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/
答案 1 :(得分:6)
要完成这项工作,您需要:
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;
}
});
<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);
}
}
<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>
答案 2 :(得分:2)
你可以试试这个。希望它有所帮助
import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
@Component({...})
export class MyPage{
@ViewChild(Content) content: Content;
scrollToTop() {
this.content.scrollToTop();
}
}
答案 3 :(得分:0)
在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
});
}
答案 4 :(得分:0)
如果组件内部有组件,则可能无法在内部组件中获取内容。那说我必须得到上层元素并调用滚动。
在我的情况下,当我进入下一张幻灯片时,我必须在下一张幻灯片中排在首位。
const element = document.querySelector(".slide-zoom");
setTimeout(() => { if(element) element.scrollIntoView(true) }, 200);
&#13;