用户登录

页面内容加载以后要把占位符组件隐藏起来,显示正常页面的内容 .. 在产品页面上请求产品数据的时候用了 fetchData .. 给它添加一个 complete 回调 .. 请求完成就会执行它 .. 用一下 this.fetchDataComplete .. bind 一个 this ..

在页面上再去定义一下这个回调方法 .. 名字是 fetchDataComplete .. 请求完成以后不管成功还是失败都可以把 placeholer 的值设置成 false ..

这里先做一下判断 .. 检查 process.env.NODE_ENV ,看看当前环境是不是 development .. 如果是的话,可以延迟一下设置页面的状态 .. setTimeout .. 给它一个回调方法 .. 里面用一下 this.setState .. 把 placeholder 的值设置成 false .. 延迟的时间先把它设置成 1000 毫秒 ..

因为在 fetchData 里面 .. 如果是开发环境,成功得到数据以后也会有一点延迟 .. 找到这个模块 .. 可以把这个延迟的时间也设置成 1000 毫秒 ..

回来继续编辑这个完成回调 .. 如果不是开发环境 .. 可以立即去把 placeholder 设置成 false ..

下面再找到页面的视图 .. 显示正常页面的内容可以判断一下 .. 如果 placeholder 的值不是 true .. 才会显示正常页面的内容 ..

在模拟器上再预览一下 ..

加载内容的时候会显示内容占位符 .. 加载成功,隐藏内容占位符,显示正常的内容 ...

产品页加载占位符的显示逻辑《 电商小程序案例:产品内容 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点