ionic3实现回顶部操作

2018-2-5 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


第一种

用id获取模板中content中最高的那个元素,给元素设置id:

id="topest"
	
  • 1

然后触发方法:

toView(){ let element = document.getElementById("topest"); if(element){
      element.scrollIntoView();
}
	
  • 1
  • 2
  • 3
  • 4
  • 5

这也就是我们常说的锚点,这种方法是直接跳到该元素的,体验不是很好,不要用。

第二种

首先导入:

import { Content } from 'ionic-angular';
	
  • 1

然后获取content的实例:

@ViewChild(Content) content: Content;
	
  • 1

然后调用content的scrollToTop()

toTop() {
    this.content.scrollToTop(); }
	
  • 1
  • 2
  • 3

这种是滚动上去的。 
然而,当content设置为fullscreen时,header会覆盖一部分(不会完全滑动上去),如图: 
这里写图片描述

所以

第三种方法:

滚动到指定坐标位置,三个参数依次为坐标x,y,滚动时间(毫秒单位)。

scrollTo(){ this.content.scrollTo(0, 0, 300) }
	
  • 1
  • 2
  • 3

第二种的scrollToTop(),还有这个scrollTo(0, 0, 300)都是content的方法。更多详情请参考官网。我开始学的时候,就看到它是content标签,其他就不管了。后来再回去看时,发现还有很多有用的内容。这再次告诉我们,多看官网是没错的。

以上的方法在哪里触发呢,常见的就是用个FabButton,另一种就是双击顶部(如微信朋友圈)

FabButton:FabButton翻译

翻译得不是很好哈。 
然而FabButton一直放在那里,也不是很好,下面实现滚动到底部时显示,回到顶部后隐藏: 
给FabButton添加:

*ngIf="top"
	
  • 1

给content添加事件,当滚动时触发:(ionScroll)=”check()” 
在ts中,top=false; 
check():content有个属性scrollTop,为可见视图的最高元素到content顶部的距离(可理解为向下滑动的距离),滑动时,检查它是否大于指定距离,如果为true,则设置top为true,以显示FabButton。

check(){ if(this.content.scrollTop>400){ this.top = true;
      }else{ this.top = false;
      } this.cd.detectChanges();
  }
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

但是,ng并没有智能到一有数据变更就能自动检测到的,有些特殊情况,并没有触发ng的变更检测。所以当你已经滑下来了,页面是没有显示FabButton的。 
解决:手动触发变更检测,以渲染模板 
首先,在ts导入:

import { Component, ChangeDetectorRef } from '@angular/core';
	
  • 1

然后在构造函数里注入:

constructor(private cd: ChangeDetectorRef)
	
  • 1

最终在更新变量后,手动调用代码,强制页面检查刷新即可:

this.cd.detectChanges();
	
  • 1

然而,button突变式的显示与消失,也不好,哈哈。可以为其添加进场与离场动画哦。

双击回顶部

这个没什么好说的,就像微信朋友圈那样,在title绑定双击事件(dblclick)就可以了

万达主管,万达主管QQwww.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: ionic3实现回顶部操作

分享到: 新浪微博 腾讯微博 微信 微信 更多

Powered by emlog 京ICP备12006971号-1 sitemap
友情链接:测试  万达娱乐注册  万达娱乐招商QQ  万达注册  万达直属  万达娱乐  万达招商  万达娱乐主管QQ  万达直属QQ  万达娱乐注册