<
ion-fab [
hidden]=
"!fabshow"
tappable (
click)=
"scollToTop()"
>
<
button
ion-fab
icon-only
class=
"el-stt-button"
>
<!-- <ion-icon name="arrow-dropup"></ion-icon> -->
<
img
src=
"assets/img/u94.png"
class=
"el-pic"
>
</
button
>
</
ion-fab
>
typescript代码/////////////////////////////
import {
Component,
Input,
ApplicationRef }
from
"@angular/core";
import {
Content,
Events }
from
"ionic-angular";
/**
* Generated class for the MyTopContentComponent component.
*
* See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
* for more info on Angular Components.
*/
@
Component({
selector:
'my-top-content',
templateUrl:
'my-top-content.html'
})
export
class
MyTopContentComponent {
fabshow:
boolean =
false;
//开始出现返回顶部按钮的距离（Content.scrollHeight的指定倍数，默认为2）
@
Input(
"dis")
_dis:
number =
300;
constructor(
private
_content:
Content,
private
applicationRef:
ApplicationRef,
private
events:
Events) {
}
ngAfterViewInit() {
this.
_content.
ionScroll.
subscribe(
content
=> {
console.
log(
content.
scrollTop);
if (
content.
scrollTop >=
this.
_dis) {
//翻了指定的页数，显示置顶按钮
this.
fabshow =
true;
//立即开始dom-value检查
this.
applicationRef.
tick();
}
else
if (
content.
scrollTop <
this.
_dis) {
//翻到顶部了，隐藏置顶按钮
this.
fabshow =
false;
//立即开始dom-value检查
this.
applicationRef.
tick();
}
});
}
scollToTop() {
this.
_content.
scrollToTop();
}
}
scss样式///////////////////////////////////
my-top-content {
.el-stt-button {
border:
1px
solid
#bd3800;
border-radius:
100%;
width:
4em;
height:
4em;
color:
#bd3800;
position:
fixed;
bottom:
0em;
margin:
0
0
.6em
.6em;
background-color:
#fff;
right:
0em;
margin:
0
.6em
.6em
.6em;
&
.activated {
background:
#8d8d8d
}
.icon {
color:
#6b6b6b;
font-size:
40px;
}
}
.el-pic {
height:
1.7em;
}
}