SNS项目笔记<五>--content滚动の坑

项目中，在使用<ion-content>滚动到底部的时候，一直使用其官方的scrollToBottom()，但是在实际运行的时候，总是无法显示出效果，这里就很奇怪了，官方也未做任何对于它的解释，为啥在同步情况下无法达到最终的效果？最终博主检查代码，发现了其中的坑。

直接使用，未处理.gif

在努力寻找并翻阅源代码的时候发现：

centent源代码.jpg

也就是说在content源代码中，有个ScrollView，也就是说对content滚动操作都是对这个scrollview进行滚动操作。于是我们翻阅了scrollview的源代码。

ScrollView源代码：

ScrollView源代码1.jpg

ScrollView源代码2.jpg

不难理解在对content调用任何的关于滚动的方法都会触及到ScrollView，也就是说每次滚动调用ScrollView的方法，再看看ScrollView本身调用的方法的注释"DOM WRITE" 为耗时操作，所以需要handler之类的异步处理方式。而既然进行dom操作，那么我们再进入dom的ts源码进行查阅与分析：

dom源码部分.png

即包含有handler的有这么几个方法，这些方法都是处理耗时操作的。这里博主推荐用setTimeout进行处理handler，因为可以自己控制此耗时操作的时间，可以在网络请求数据并填充数据【这里angular通过数据绑定，进行domwrite操作，同样耗时，所以需要异步延迟处理】后，用来处理这样的耗时操作，于是有了以下代码：

代码语言：javascript复制

  @ViewChild(Content) content :Content
  setTimeout (()=>{
       content._scroll.scrollToBottom()
  } ,1000)

将此方法甚至能够封装成一个utils：

代码语言：javascript复制

  export class Utils{
  
      public static toMoveBottom(content:Content){
          setTimeout(()=>{content._scoll.scrollToBottom()},1000)
    }

}

最后看看处理后的效果：

处理后的效果.gif

angularjs

0 人点赞