100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序解决页面数据处理多时页面卡顿的问题

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

时间:2018-11-06 02:11:43

相关推荐

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。