一, 演示
演示. gif
二, 说明:
/**
* 实现思路: 需要默认数据, 这样才能完美应对 list,wx:if 的情况, 及 flex 宽度靠内容撑开的样式.
* 替换思路: 和 imageLoader 加载器类似: 先展示默认图片, 拿到数据之后显示真实的图片
*
* 具体实现:
* 页面准备一份默认数据: defaultData
* xml 中:<skeleton watchData={{与卡槽笨蛋一样的对象}}><slot/></skeleton>
* 页面 onload 时, data=defaultData
* 此时: watchData 第一次收到数据 (第一次为 onload 时), 靠默认数据, 撑开卡槽容器, 自身 opacity:0;
* 此后, 再收到数据就关闭骨架屏
*
* 优点:
* 1, 好维护: 页面没有额外的 xml. 也没有额外的 CSS. 只需要维护一份默认数据即可.
* 2, 更优雅, 更真实: 多个请求, 会看到分批次的替换. 而不需要全请求成功才替换.
* 3, 可以和 imageLoader 共处, 而不会出现和美团等骨架屏没有之后, 图片区域还出现短暂空白
*
* 注意事项:
* 1,custom-class: 需要传与卡槽一样的 [border-radius]; 可选 [背景色], 或者其它
* 2,custom-class: 宽高不需要传, 默认数据就是撑开宽高的
*/
优点
好维护: 页面没有额外的 xml. 也没有额外的 CSS. 只需要维护一份默认数据即可
更优雅, 更真实
: 多个请求, 会看到分批次的替换. 而不需要全请求成功才替换.
可以和 imageLoader 共处
: 而不会出现和美团等骨架屏没有之后, 图片区域还出现短暂空白
三, 代码:
- import {
- extendComponent
- } from '../../common/component';
- extendComponent({
- properties: {
- watchData: null,// 观察对应的请求对象
- },
- observers: {
- "watchData":function(newVal){
- this.data.counter+=1;
- if(this.data.counter>=2){
- this.setData({success:true});
- }
- }
- },
- data: {
- counter:0,// 第一次显示骨架屏, 之后就显示真实节点.
- success:false // 不可逆, 只能 false->true
- }
- })
- <!--components/skeleton/skeleton.wxml-->
- <!-- 这里是真实渲染 -->
- <view wx:if="{{success}}">
- <slot />
- </view>
- <!-- 这里是骨架屏 -->
- <view wx:else class="skeleton custom-class">
- <!-- 原有内容, 来撑开父容器 -->
- <view style="opacity:0;display:inline-block; vertical-align:bottom;">
- <slot />
- </view>
- </view>
来源: http://www.jianshu.com/p/ec8880b871ee