更优雅的微信小程序骨架屏详解

一、示范

二.解释：

实现思路：需要默认数据，完美应对list、wx:if、flex width依赖内容的样式等情况。

替代思路：类似imageLoader loader:先显示默认图片，获取数据后显示真实图片

具体实施：

为页面准备默认数据：默认数据

在xml中：skeleton watchData={{与卡槽白痴相同的对象}}slot//skeleton

在页面加载时，数据=默认数据

此时：watchData第一次接收数据(第一次加载时)，根据默认数据，打开卡槽容器，其opacity:0

之后，再次接收数据后关闭骨架屏幕

优点：

1.易于维护：页面没有额外的xml。没有额外的css。只需要维护一个默认数据。

2.更优雅，更真实：多个请求将被分批替换。并且不需要成功替换完整请求。

3.可以与imageLoader共存，但美团等骨架屏消失后，画面区域不会出现短空白。

4.可定制：

共存：文本、图片/imageLoader或其他。低入侵骨架屏幕不是一个完整的，而是项目，可以有不同的风格或过渡，以完美地支持在底部加载期间的骨架屏幕。注意事项：

1.自定义类：应该传递与卡槽相同的[边框半径];可选[背景色]或其他

2.自定义类：不需要传输宽度和高度，默认数据是展开宽度和高度

三.代码：

从“”导入{ extendComponent}././common/component '；extend component({ properties : { watch data : null，//观察对应的请求对象transition : {///transition name，nametype3360string，value: null}}，observers : { ' watch data ' : function(NewVal){ this . data . counter=1；if(this . data . counter=2){ this . setdata({ success : true })；}}，data: { counter:0。//第一次显示骨架屏幕，然后显示真实节点。success 3360 false//不可逆，只有false-true }})！-组件/骨架/skeleton.wxml -！-这里是真实的渲染-view wx : if=' { { success } } ' slot//view！-这里是骨骼屏幕：有动画-过渡wx : elf=' { { transition } } ' show=' { { true } } ' name=' { { transition } } ' duration=' { { 800 } } ' custom-class=' skeleton custom-class '。槽//视图/过渡！-骨骼屏幕上没有动画：-view wx : else class=' skeleton custom-class ' view style=' opa city 33600；'Slot//view/view以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。