ionic 页面滚动到底部方法

骑猪看日落 2022-04-08 18:13 403阅读 0赞

强列推荐先看这篇译文《[angular4 滚动事件][angular4]》  
  
You’re trying to call a component method before it has fully rendered. You need to wait and call it after the view is fully loaded and all the elements have been created.

export class HomePage {
      @ViewChild(Content) content: Content;
    
      constructor() {
      }
    
      ionViewDidEnter() {
        this.content.scrollToBottom();
      }
    }

一、以上方法来自：[ionic论坛][ionic] 《[Ion-scroll scrollToBottom][]》[ ][Ion-scroll scrollToBottom]中 [mhartington ][mhartington]回答，我们Tony大神也是用这中方法实现。

二、另外也可以参考这篇《[ionic2/3 页面默认滚动到底部][ionic2_3]》

两种方法：

1.使用 content 组件的 scrollToBottom() 方法,可以封装成函数使用：

//页面滚动到底部

scrollToBottom() {      
        setTimeout(() => {        
            if(this.content.scrollToBottom){            
                this.content.scrollToBottom(0);        
            }      
        },200)    
    }

2.使用 content 组件的 scrollDownOnLoad 属性：

<ion-content scrollDownOnLoad="true">

总结：  
方法1体验不是很好,200毫秒的延迟视觉上可以看出来  
方法2异步的请求有时候不能及时响应(可以请求第一次后存入本地存储里面),经过测试 虽然ionic3 中本地存储也是异步的，但是毫无延迟(可能是比较快)  
推荐1+2一起使用

[angular4]: https://blog.csdn.net/mrfano/article/details/76147021
[ionic]: https://forum.ionicframework.com
[Ion-scroll scrollToBottom]: https://forum.ionicframework.com/t/ion-scroll-scrolltobottom/57899
[mhartington]: https://forum.ionicframework.com/u/mhartington
[ionic2_3]: https://blog.csdn.net/qq_28765817/article/details/77099430