ionic3实现返回顶部功能_ionic3如何实现返回顶部?
ionic3有ion-infinite-scroll组件可以让我们方便的实现移动端的分页查询逻辑(上拉加载更多操作)。可是在列表很长的时候,我们还需要一个可以快速返回列表顶部的空间。下面给大家介绍几种ionic3返回顶部的方法
Ionic4.x返回顶部请参考:http://www.ionic.wang/article-index-id-167.html
Ionic3返回顶部第一种方法:
用id获取模板中content中最高的那个元素,给元素设置id:
id="topest"
然后触发方法:
toView(){ let element = document.getElementById("topest"); if(element){
element.scrollIntoView();
}
这也就是我们常说的锚点,这种方法是直接跳到该元素的,体验不是很好,不要用。
ionic3.x返回顶部第二种方法:
首先导入:
import { Content } from 'ionic-angular';
然后获取content的实例:
@ViewChild(Content) content: Content;
然后调用content的scrollToTop()
toTop() { this.content.scrollToTop(); }
这种是滚动上去的。
然而,当content设置为fullscreen时,header会覆盖一部分(不会完全滑动上去),如图:
双击回顶部
这个没什么好说的,在title绑定双击事件(dblclick)
来源:http://blog.csdn.net/qq993284758/article/details/78494003