链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
页面加载时的优化方式
有些时候在我们的页面中有大量数据或者图片加载,如果不做任何处理,整个进入加载的用户体验会很差很难看
目前大部分有两种方式优化增加用户体验
第一种为增加菊花加载或其它样式的加载按钮,在数据加载完成后隐藏
第二种就是骨架屏形式,现在小程序已经支持快速生成骨架屏,用起来相当方便.
什么是骨架屏
骨架屏 Skeleton Screen Loading 也叫加载占位图，是近年流行的加载控件，通常表现形式是在界面上待加载区域填充灰色的占位图，与线框图的效果非常相似。Skeleton Screen本质上是界面加载过程中的过渡效果。
骨架屏的应用场景
适用于布局排版固定的内容区域
骨架屏所展现的是内容的大概轮廓，如果内容布局和排版不是固定的，那么轮廓和内容布局的巨大差异，不仅不能给用户顺畅和期待感，反倒会造成落差。
因此骨架屏适用于布局排版固定的内容区域，例如列表、文章、个人信息。
注意：如果内容区域有空页面的情况，也不建议使用骨架屏。
微信小程序中使用骨架屏
生成骨架屏
首先进入我们需要生成骨架屏的页面,然后在我们开发者工具中点击生成骨架屏
在页面目录生成list.skeleton.wxml 、list.skeleton.wxss在list.wxss中引入
@import "./list.skeleton.wxss";
- 在list.wxml中加入代码
<import src="list.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
- 把list.wxml原有代码包裹在<block>中
<block wx:else>
原有页面代码
</block>
- 在list.js中控制loading
Page({
data: {
loading: true
},
onReady(){
setTimeout(()=>{
this.setData({
loading: false
})
},3000)
}
}
