当前位置: 首页 > article >正文

uniapp的移动端骨架屏组件开发应用

背景

基于移动端 UI 骨架屏的扩展性受限,uniapp和小程序等不支持Vue框架的自定义指令(directives),遂开发组件以实现骨架屏的自定义开发

使用

引入组件

保证演示效果,show默认为true

页面标签自定义绑定

为需要显示骨架的标签,增加指定类名(长宽圆角等样式会和原标签一致,详见[code](#Sg4fa)

实现

关键实现

传入参数
选择器 selector

是否显示 show

矩形骨架
从dom样式中获取圆角参数

圆形(点)骨架
骨架为原型,圆角参数由宽度计算

dom节点获取
实现区分**H5**和**小程序**,此处还未加入微信小程序适配

这里以矩形节点为例

code
```javascript









http://www.kler.cn/a/354936.html

相关文章:

  • 基于ceres优化的3d激光雷达开源算法
  • VSCode 性能优化指南:提高编码效率,减少资源占用
  • TORCH_CUDA_ARCH_LIST
  • Hive SQL 之 `LATERAL VIEW EXPLODE` 的正确打开方式
  • mysql数据库面试核心概念
  • 【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
  • Java重修笔记 TCP 网络通信编程 - 传输文件
  • 【计算机网络 - 基础问题】每日 3 题(四十五)
  • 供应商管理是什么?
  • 瘦客户机介绍
  • 智能时代03学习日记
  • 自监督学习:引领机器学习的新革命
  • 电脑显示未安装任何音频输出设备怎么处理?
  • SQL中GROUP BY 和 HAVING 子句中使用 NULL 条件问题
  • Oracle实际需要用到但常常被忽略的函数
  • 3D Slicer 教程一
  • 【 ACM独立出版】第二届通信网络与机器学习国际学术会议(CNML 2024,10月25-27)
  • 01.单例模式设计思想
  • # linux从入门到精通-从基础学起,逐步提升,探索linux奥秘(十三)--权限设置注意事项和属主属组设置sudo操作
  • Google play开发者账号被封,申诉就有机会,别不信
  • day-68 使二进制数组全部等于 1 的最少操作次数 I
  • 三步指南 | 如何轻松将CATIA文件导入SOLIDWORKS?
  • 【热门】智慧果园管理系统解决方案
  • TCP(三次握手)和UDP(面向无连接)的原理以及区别
  • 软硬连接及动静态库
  • LeetCode岛屿数量