微信小程序---骨架屏实现，实现起来超级简单

2024-05-10 06:21:50

一、什么是骨架屏？

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。通常在小程序中，我们需要手工维护骨架屏的代码，当业务变更时，同样需要对骨架屏代码进行调整。

二、为什么要用骨架屏

请求数据时都会出现一定的延迟，屏幕从而会出现一大片空白，以前对于这段等待时间的处理大多数都是采用菊花图加载动画或者类似于这种的加载动画。

这种方式请求时页面会卡住，直到请求完成，用户期间无法进行任何的操作，只能看着加载动效图，给人一种死机的感觉，体验差。为了进一步提升用户的体验，于是就出现了另一种加载方式——骨架屏（ Skeleton Screen ）

三、骨架屏效果

未加载完成数据后，展示空白灰色盒子，加载成功后才展示内容

四、实现方法

1、微信开发者工具可以为当前页面生成骨架屏，工具入口位于模拟器面板右下角三点处。生成之后会多出两个文件。index.skeleton.wxml里面有使用步骤

2、引用文件，在index.wxml引用骨架屏，通过skeleton_loading来控制显示/隐藏

在index.wxss里面调用骨架屏样式

在index.js里面data将skeleton_loading变为false，等数据请求成功后，将其变为true即可。

注：1、当页面布局改变之后，骨架屏也要重新成功

2、生成骨架屏后，出现有些图片一样会展示，可以修改index.wxml或index.js将静态资源动态和请求成功后同步获取。切记不要直接更改生成骨架屏文件，除非你只想要一次性，不然后续更改很麻烦。

微信小程序---骨架屏实现，实现起来超级简单相关推荐

微信小程序 - 骨架屏
骨架屏 - "与其等待网络加载,不如提前给点暗示" 注:不适用复杂交互效果演示示例解释以及使用全在index.wxml中,观看需了解组件使用. 示例下载:微信小程序-骨架屏演示 ...
微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...
电脑版微信小程序全屏显示方法，手机横屏方法。
电脑版微信小程序全屏显示方法: 在app.json中加入:"resizable": true 注意要与"pages"同级,网上有许多错误方法! 手机横屏方法: ...
小程序源码：图片拼图微信小程序源码-多玩法安装简单
该款小程序支持多种流量主另外支持多种图形模板制作切割另外也支持长图合成等功能安装简单,新手容易上手,具体就不多说了大家自行研究吧! 小程序源码下载地址: 小程序源码:图片拼图微信小程序源码-多玩 ...
微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
微信小程序白屏问题总结一二
最近时不时有用户反馈,小程序白屏,多数以华为畅享机型,iphone6P机型,荣耀8为主,主要表现为小程序刚进去时显示正常,来回切换几个页面后,个别页面就出现白屏啦. 期初以为是代码问题,JS报错,导致 ...
微信小程序全屏轮播（仿北京环球）
空闲时间看见北京环球的微信小程序,感觉首页效果挺好看的,所以就动手做了一下.仅供参考! 文章目录 1.效果预览 2.代码实现 2.1 HTML 2.2 CSS 2.3 JSON 2.4 JS 1.效果 ...
微信小程序 this和that详解及简单实例
微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报 ...
微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...

最新文章

热门文章