三分钟学会微信小程序骨架屏,skeleton
前言
骨架屏，就是在页面数据尚未加载前，先给用户展示出页面的大致结构，直到请求数据返回后，再渲染页面，以优化用户体验。
开始
代码已经在github开源，大家可以去下载动手试试，现在介绍skeleton给大家。
先看一下效果：
首先我们把从github上下载的skeleton放入自己的项目里,这里说明一下,它是一个组件,我们要引用它,
在要显示骨架屏的页面json文件写入,这里我们以index页面为例(文件包括:index.wxml,index.wxss,index.js,index.json),比如我想在index页面显示那就在index.json写入如下代码:
{
// 引入骨架屏组件,根据实际情况引入路径
"usingComponents": {
"skeleton": "/component/skeleton/skeleton"
}
}
继续在index.js写入测试代码,实际上线根据需求修改。
在onLoad方法写入如下代码：
onLoad: function () {
const that = this;
setTimeout(() => { //3S后隐藏骨架屏
that.setData({
showSkeleton: false
})
}, 3000)
},
继续在index.wxml写入代码:
记住这段代码要放在最顶部,就是第一行。
<!-- 作为组件在页面中使用 -->
<skeleton selector="skeleton"
loading="spin"
bgcolor="#FFF"
wx:if="{{showSkeleton}}"></skeleton>
<!--index.wxml-->
<!-- 渲染的根节点，加上 .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}}" wx:key="{{index}}" 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>
skeletonAPI介绍:
| Options | Type | Required | Default | Description |
|---|---|---|---|---|
| selector | String | No | skelton | 渲染节点的标识前缀，比如selector="skeleton"，那么页面根节点就是class="skeleton"绘制矩形就是class="skeleton-rect"，圆形就是class="skeleton-radius" |
| loading | String | No | spin | 骨架屏渲染时的动画，有spin和chiaroscuro |
| bgcolor | String | No | #FFF | 骨架屏背景 |
原创文章，转载请注明：三分钟学会微信小程序骨架屏,skeleton | 知识改变命运
转载请注明出处： 知识改变命运 » 三分钟学会微信小程序骨架屏,skeleton
