10-微信小程序-骨架屏

链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html

页面加载时的优化方式

有些时候在我们的页面中有大量数据或者图片加载,如果不做任何处理,整个进入加载的用户体验会很差很难看

目前大部分有两种方式优化增加用户体验

第一种为增加菊花加载或其它样式的加载按钮,在数据加载完成后隐藏
第二种就是骨架屏形式,现在小程序已经支持快速生成骨架屏,用起来相当方便.

什么是骨架屏

骨架屏 Skeleton Screen Loading 也叫加载占位图，是近年流行的加载控件，通常表现形式是在界面上待加载区域填充灰色的占位图，与线框图的效果非常相似。Skeleton Screen本质上是界面加载过程中的过渡效果。

骨架屏的应用场景

适用于布局排版固定的内容区域
骨架屏所展现的是内容的大概轮廓，如果内容布局和排版不是固定的，那么轮廓和内容布局的巨大差异，不仅不能给用户顺畅和期待感，反倒会造成落差。
因此骨架屏适用于布局排版固定的内容区域，例如列表、文章、个人信息。
注意：如果内容区域有空页面的情况，也不建议使用骨架屏。

微信小程序中使用骨架屏

1. 生成骨架屏
   首先进入我们需要生成骨架屏的页面,然后在我们开发者工具中点击生成骨架屏
   在页面目录生成list.skeleton.wxml 、list.skeleton.wxss

2. 在list.wxss中引入

@import "./list.skeleton.wxss";

3. 在list.wxml中加入代码

<import src="list.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />

4. 把list.wxml原有代码包裹在<block>中

<block wx:else>
    原有页面代码
</block>

5. 在list.js中控制loading

Page({
  data: {
      loading: true
  },
  onReady(){
    setTimeout(()=>{
      this.setData({
        loading: false
      })
    },3000)
  }
}