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

背景

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

使用

引入组件

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

页面标签自定义绑定

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

实现

关键实现

传入参数
选择器 selector

是否显示 show

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

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

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

这里以矩形节点为例

code
```javascript








### 实现 UniApp 骨架效果的方法 #### 创建骨架组件 为了提升用户体验,在应用加载过程中显示骨架是一个不错的选择。在 uni-app 中创建骨架组件可以通过以下方式完成: 1. **准备阶段** 在项目中找到合适的位置来放置新的组件文件夹,通常是在 `components` 或者自定义的公共文件夹下如 `common` 文件夹内建立新组件的相关文件[^2]。 2. **构建 Vue 组件结构** 接下来按照标准的 Vue 单文件组件格式编写 `.vue` 文件,这其中包括模板、样式和脚本部分。对于简单的骨架来说,可能只需要设计静态 HTML 和 CSS 而不需要复杂的 JavaScript 逻辑。 3. **引入并注册组件** 完成上述操作后就可以像其他任何常规组件一样导入并在页面上使用这个骨架组件了。确保该组件能够在需要的地方被正确渲染出来。 4. **调整样式以匹配实际布局** 设计骨架时应考虑其外观尽可能贴近真实内容的样子,以便给用户提供一种平滑过渡的感觉。可以利用 flexbox 或 grid 等现代 CSS 技术轻松模拟出各种 UI 元素形状。 ```html <template> <view class="skeleton"> <!-- 这里可以根据具体需求定制 --> <view class="item"></view> <view class="item"></view> <view class="item"></view> </view> </template> <script setup lang="ts"> // 如果有交互行为或其他功能,则在此处添加相应的 TypeScript/JavaScript 代码 </script> <style scoped> .skeleton { display: flex; justify-content: space-between; } .item { width: 80px; /* 自定义宽度 */ height: 80px; /* 自定义高度 */ background-color: #eaeaea; } </style> ``` 5. **处理特殊情况下的兼容性和性能问题** 当涉及到不同平台(iOS, Android)之间的差异或是网络状况不佳的情况时,应该特别注意测试这些场景中的表现,并采取措施提高效率减少卡顿现象的发生[^1]。 通过以上步骤可以在 uni-app 应用程序内部成功集成一个有效的骨架解决方案,从而改善整体视觉流畅度和响应速度感知。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值