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


Posted in Javascript onAugust 07, 2019

一、演示

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

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

二、说明:

实现思路:需要默认数据,这样才能完美应对list,wx:if的情况,及flex宽度靠内容撑开的样式。

替换思路:和imageLoader加载器类似:先展示默认图片,拿到数据之后显示真实的图片

具体实现:

页面准备一份默认数据:defaultData

xml中:<skeleton watchData={{与卡槽笨蛋一样的对象}}><slot/></skeleton>

页面onload时,data=defaultData

此时:watchData第一次收到数据(第一次为onload时),靠默认数据,撑开卡槽容器,自身opacity:0;

此后,再收到数据就关闭骨架屏

优点:

1.好维护:页面没有额外的xml。也没有额外的css。只需要维护一份默认数据即可。

2.更优雅,更真实:多个请求,会看到分批次的替换。而不需要全请求成功才替换。

3.可以和imageLoader共处,而不会出现和美团等骨架屏没有之后,图片区域还出现短暂空白

4.可定制:

  • 可以共存:文字,图片/imageLoader,或其它的。低入侵
  • 骨架屏不是一个完整的,而是items,且可以有不同的样式或过渡
  • 可以完美支持触底加载时的骨架屏

注意事项:

1、custom-class:需要传与卡槽一样的[border-radius];可选[背景色],或者其它

2、custom-class:宽高不需要传,默认数据就是撑开宽高的

三、代码:

import {
 extendComponent
} from '../../common/component';
extendComponent({
 properties: {
  watchData: null,//观察对应的请求对象
  transition:{//过渡名称,对应该组件的name
   type:String,
   value: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>

<!-- 这里是骨架屏:有动画情况 -->
 <transition 
  wx:elif="{{transition}}"
  show="{{true}}"
  name="{{ transition }}"
  duration="{{800}}"
  custom-class="skeleton custom-class"
 >
  <view style="opacity:0;">
    <slot />
  </view>
</transition>

<!-- 这里是骨架屏:无动画情况 -->
<view wx:else class="skeleton custom-class">
  <view style="opacity:0;">
    <slot />
  </view>
</view>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
vue 集成jTopo 处理方法
Aug 07 #Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 #Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 #Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 #Javascript
javascript for循环性能测试示例
Aug 07 #Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 #Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 #Javascript
You might like
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php中的观察者模式
2010/03/24 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Android笔试题总结
2014/11/29 面试题
单位介绍信范文
2014/01/18 职场文书
青年文明号复核材料
2014/02/11 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
工程进度款催款函
2015/06/24 职场文书
车辆挂靠协议书
2016/03/23 职场文书
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB