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

微信小程序开发交流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);}
})

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

微信小程序ios滑动问题（滑动卡顿，下拉拖动自定义导航栏）
微信小程序ios滑动问题(滑动卡顿,下拉拖动自定义导航栏) 1.ios中个别机型类似6s ,对微信自带的scroll-view无法滑动: 解决:在滑动内容区添加css属性,overflow: auto ...
微信小程序swiper不限数量不卡顿
详情见:微信小程序swiper不限数量不卡顿轮播图优化组件(含uniapp版和纯微信开发者工具版),欢迎打包下载啦_swiper小程序插件_KV_T的博客-CSDN博客
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题本质就是设置一个变量isshare来判断是否是分享页面中进入的 data设置 isshare: 0,//不是分享页面进入 js o ...
微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
前言在微信小程序中,用户回退页面触发更新数据的操作,一般都是在页面 onShow() 中写上执行更新的函数即可. 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了 ...
关于微信小程序“南安明朗教育”活动页面错误问题记录
关于微信小程序"南安明朗教育"活动页面错误问题记录关于微信小程序"南安明朗教育"活动页面错误问题记录你好! 这是一遍关于南安明朗教育的微信小程序问题解决的日 ...
微信小程序云开发如何将页面生成为pdf?
项目场景: 最近有小伙伴问了一个问题,那就是微信小程序云开发如何将页面生成为pdf?但是在没有后端工程师的协助下,我们要怎么办了? 解决方案: 于是便逛了一下微信社区,但很遗憾腾讯baba没有给出相应 ...
微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案参考文章: (1)微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案 (2)https://www. ...
uniApp和微信小程序好看的我的页面（有源码）
uniApp和微信小程序好看的我的页面(有源码) 1.先睹为快未登录状态以登录 uniapp源码 <template><view class="content" ...
自学微信小程序开发第五天- 页面切换相关
自学微信小程序开发第五天- 页面切换相关创建多个页面页面间跳转页面间传值另一个页面跳转的方式(重定向) 点击跳转元素时的样式导航API 研究过页面样式设计后,就是多页面的呈现了,这就需要研究 ...

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

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

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

最新文章

热门文章