微信小程序解决页面数据处理多时页面卡顿的问题

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

解决思路：

第一步。默认整个页面都不显示。等数据加载出来了再显示

第二部。分段显示，每一个段落都默认不显示，使用 setTimeout 延时显示（根据段落递增延时的时间，中间间隔0.05秒）

示例图：

demo代码

<view class='page_show' wx:if='{{page_show}}'>
  <view class='page_show_1' wx:if='{{page_show_1}}'></view>
  <view class='page_show_2' wx:if='{{page_show_2}}'></view>
  <view class='page_show_3' wx:if='{{page_show_3}}'></view>
</view>

.page_show{
  width: 100%;
  height: 1000rpx;
  background: rebeccapurple;
}

.page_show_1{
  width: 100%;
  height: 200rpx;
  background: aquamarine;
}

.page_show_2{
  width: 100%;
  height: 200rpx;
  background: darkgoldenrod;
}

.page_show_3{
  width: 100%;
  height: 200rpx;
  background: coral;
}

var animation = wx.createAnimation({})
var i = 1;
Page({
  data: {
    page_show:false,
    page_show_1: false,
    page_show_2: false,
    page_show_3: false,
  },
  onLoad(){
    setTimeout(()=>{
      this.setData({
        page_show: true,
      })
    }, 500);
    setTimeout(() => {
      this.setData({
        page_show_1: true,
      })
    }, 550);
    setTimeout(() => {
      this.setData({
        page_show_2: true,
      })
    }, 600);
    setTimeout(() => {
      this.setData({
        page_show_3: true,
      })
    }, 650);
  }
})