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