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


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 03 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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下封装较好的数字分页方法
2010/11/23 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
php-fpm中max_children的配置
2019/03/15 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
Python去除、替换字符串空格的处理方法
2018/04/01 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python 连续不等式语法糖实例
2020/04/15 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
十佳美德少年事迹材料
2014/02/05 职场文书
农民工讨薪标语
2014/06/26 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
2014年减负工作总结
2014/12/10 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
公司业务员管理制度
2015/08/05 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
Redis特殊数据类型bitmap位图
2022/06/01 Redis