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


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技巧
Dec 06 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
PHP attributes()函数讲解
2019/02/03 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
理解Python中的With语句
2015/02/02 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
给儿子的表扬信
2014/01/15 职场文书
竞选村长演讲稿
2014/04/28 职场文书
服务承诺书怎么写
2014/05/24 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
小马王观后感
2015/06/11 职场文书
给领导敬酒词
2015/08/12 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js