一个程序问题

程序目的，聊天程序首次打开的时候后台请求数据填充到qList中，获取内容的高度向下滚动到最低处

  1. }).then(res => {
  2.   this.qList = res.data.data.reverse();
  3.   /**
  4.          * 获取内容的高度，当发送新消息时自动滚动到最底部
  5.          * 当内容增加时,重新计算总view的高度
  6.          */
  7.   (() => {
  8.     let header = uni.createSelectorQuery().select(".scroll");
  9.     header
  10.       .fields(
  11.       {
  12.         size: true,
  13.         scrollOffset: false
  14.       },
  15.       data => {
  16.         this.pageHeight = data.height;
  17.         console.log(this.pageHeight, "-----pageHeight------");
  18.         uni.pageScrollTo({
  19.           scrollTop: this.pageHeight,
  20.           duration: 300
  21.         });
  22.       }
  23.     )
  24.       .exec();
  25.   })();

但是程序最后只滚动了267px，并没有把内容填充后的高度计算进去
image.png

把这个程序放到一个setTimeout中发现可以了

  1.   }).then(res => {
  2.         this.qList = res.data.data.reverse();
  3.         /**
  4.          * 获取内容的高度，当发送新消息时自动滚动到最底部
  5.          * 当内容增加时,重新计算总view的高度
  6.          * 放setTimeout宏任务队列等待视图渲染完获取高度
  7.          */
  8.         setTimeout(() => {
  9.           let header = uni.createSelectorQuery().select(".scroll");
  10.           header
  11.             .fields(
  12.               {
  13.                 size: true,
  14.                 scrollOffset: false
  15.               },
  16.               data => {
  17.                 this.pageHeight = data.height;
  18.                 console.log(this.pageHeight, "-----pageHeight------");
  19.                 uni.pageScrollTo({
  20.                   scrollTop: this.pageHeight,
  21.                   duration: 300
  22.                 });
  23.               }
  24.             )
  25.             .exec();
  26.         }, 0);
  27.       });

计算进去了追加内容后的高度
image.png

渲染是异步的