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


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 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
ES6数组的扩展详解
Apr 25 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
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动态柱状图实现方法
2015/03/30 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
DOM 事件流详解
2015/01/20 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
详解angular element()方法使用
2017/04/08 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
Python实现翻转数组功能示例
2018/01/12 Python
python url 参数修改方法
2018/12/26 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
大一军训感言
2014/01/09 职场文书
房地产开盘策划方案
2014/02/10 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
监察建议书格式
2014/05/19 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
名人传读书笔记
2015/06/26 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python