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


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实现画板的代码
Sep 05 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
简单的Jquery全选功能
Nov 07 Javascript
JavaScript函数模式详解
Nov 07 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
分享3个php获取日历的函数
2015/09/25 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
python记录程序运行时间的三种方法
2017/07/14 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
使用Python封装excel操作指南
2021/01/29 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
中医药大学毕业生自荐信
2013/11/08 职场文书
培训专员岗位职责
2014/02/26 职场文书
公司业务员管理制度
2015/08/05 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
python使用torch随机初始化参数
2022/03/22 Python
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
linux目录管理方法介绍
2022/06/01 Servers