ionic3内容置顶按钮，在csdn一个demo基础上修改的，解决按钮在过渡过程中忽隐忽现的bug...

来源：互联网发布：手机端美工装修编辑：程序博客网时间：2024/06/06 07:14

<ion-fab [hidden]="!fabshow"tappable (click)="scollToTop()">
<buttonion-fabicon-onlyclass="el-stt-button">
<!-- <ion-icon name="arrow-dropup"></ion-icon> -->
<imgsrc="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 classMyTopContentComponent {
fabshow: boolean =false;
//开始出现返回顶部按钮的距离（Content.scrollHeight的指定倍数，默认为2）
@Input("dis")
_dis: number =300;

constructor(private_content:Content,privateapplicationRef:ApplicationRef,privateevents: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: 1pxsolid#bd3800;
border-radius: 100%;
width: 4em;
height: 4em;
color: #bd3800;
position: fixed;
bottom: 0em;
margin: 00.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;
}
}

阅读全文

0 0