微信小程序-生成骨架屏

概述

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。微信小程序提供了自动生成骨架屏代码的能力。

步骤

第一步：

点击微信小程序开发工具的右下角：

会生成2个骨架屏相关的文件：

第二步：

将这2个文件放在指定目录下，接着引用骨架屏并使用：

wxml:

<import src="./skeleton/index.skeleton.wxml" />

wxss:

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

引用模版：

<template is="skeleton"   />

控制显示：

<template is="skeleton" wx:if="{{isLoading}}" />
<block wx:else><button bindtap="toList">列表渲染</button>
</block>  

Page({ data: {   isLoading: false,},  showSkeleton() {let that = thisthis.setData({isLoading: true,})setTimeout(function () {that.setData({isLoading: false,})}, 2000)},  
})