微信小程序之骨架屏
发布时间：2021-06-29 09:05 所属栏目：小程序开发教程
骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。可以看到在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架的骨架屏页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅，如下图：
微信小程序骨架屏主要分为两种方案，下面来说说这两种方案。
1、为每个需要使用骨架屏的页面定制一套静态页面。
这种方法缺点很明显，需要为每个页面单独定制，布局如果修改则需要同时修改两个页面，增加了维护成本。但这种特别适用于长列表，只需要做用户可见的部分，可在一定程度上增加响应速度。
2、利用工具渲染页面
获取指定的DOM节点和对应样式，生成灰色块覆盖在原来的样式结构上，从而实现骨架屏。这种方式简单易用好维护，个人感觉不太适合在长列表页面。https://github.com/jayZOU/skeleton 这款骨架屏组件轻量、方便、快捷，里面有教程，强烈推荐。
以下使用第二种方法制作微信小程序骨架屏
安装组件：
npm install --save miniprogram-skeleton |
引入skeleton自定义组件
{
"usingComponents": {
"skeleton": "../miniprogram_npm/miniprogram-skeleton"
}
}
|
小程序中npm的配置及使用：
- 在微信开发者工具中，设置 —> 项目设置—> 勾选使用npm模块。
- 在微信开发者工具中，工具 —> 构建npm，构建完成会生成 miniprogram_npm 文件夹，项目用到的npm包都在这里。
- 按照页面的使用路径，从 miniprogram_npm 引入需要的包。
使用骨架屏组件
1.在wxml页面需要用到的地方使用，如下：
<!--引入骨架屏模版 -->
<skeleton wx:if="{{showSkeleton}}"></skeleton>
<!--index.wxml-->
<!--给页面根节点class添加skeleton, 用于获取当前页面尺寸，没有的话就默认使用屏幕尺寸-->
<view class="container skeleton">
<view class="userinfo">
<block>
<!--skeleton-radius 绘制圆形-->
<image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
mode="cover"></image>
<!--skeleton-rect 绘制矩形-->
<text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
</block>
</view>
<view style="margin: 20px 0">
<view wx:for="{{lists}}" class="lists">
<icon type="success" size="20" class="list skeleton-radius"/>
<text class="skeleton-rect">{{item}}</text>
</view>
</view>
<view class="usermotto">
<text class="user-motto skeleton-rect">{{motto}}</text>
</view>
<view style="margin-top: 200px;">
aaaaaaaaaaa
</view>
</view>
|
2.在js页面需要用到的地方使用，如下：
//index.js
//初始化默认的数据，用于撑开页面结构，让骨架屏可以获取到整体的页面结构
Page({
data: {
motto: 'Hello World',
userInfo: {
avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',
nickName: 'jayzou'
},
lists: [
'aslkdnoakjbsnfkajbfk',
'qwrwfhbfdvndgndghndeghsdfh',
'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',
],
showSkeleton: true //骨架屏显示隐藏
},
onLoad: function () {
const that = this;
setTimeout(() => { //3S后隐藏骨架屏
that.setData({
showSkeleton: false
})
}, 3000)
}
})
|
