微信小程序：wx:if="true"时，显示页面内容，且定时器开

wx:if="true"时，显示页面内容，且定时器开始倒计时。

问题：

当 wx:if 控制显示的内容较多时，需要过一段时间后才会显示内容，而此时倒计时已经过去好几秒了，给用户的感觉有两点不好：1，页面有卡顿；2，倒计时不准。

当 wx:if="true" 时，无法知道页面内容何时渲染完成。so，也就不能在页面渲染完成后再开始倒计时。

我的解决方法：

思路：
首先，显示一个全屏的提示 view ，提示正在加载（wx:if="{{page==2.5}}"）
其次，在数据显示 view 上添加一个全屏的确认view（wx:if="{{page==3 && showStartRecallButton}}"），只有渲染完成，该确认view才会显示。
最后，用户点击确认view上的按钮，隐藏该按钮，并显示渲染完成的数据和开始倒计时（wx:if="{{page==3}}"）

1. 添加过渡 view

<!--提示加载回忆卷-->
<view wx:if="{{page==2.5}}" class="hintLoadingRecallPaper">
  <icon type="waiting" size="32"></icon>
  <text>正在生成空白回忆卷</text>
</view>

<!--确认开始回忆-->
<view wx:if="{{page==3 && showStartRecallButton}}" class="confirmStartRecall">
  <button type="primary" bindtap="onStartRecall">开始回忆</button>
</view>


<!--回忆卷-->
<scroll-view wx:if="{{page==3}}" class="page3" scroll-into-view="{{viewId}}" scroll-y='true'>
wx:for 显示大量数据，代码省略
</scroll-view>

2. 通过 css 控制过渡view的显示

.hintLoadingRecallPaper, .confirmStartRecall {
  position: absolute;
  left: 50%;
    top:50%;
  transform:translate(-50%,-50%);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
  background: #ffffff;
}

.hintLoadingRecallPaper {
  z-index: 999;
}

.confirmStartRecall {
  z-index: 1000;
}