微信小步调-天生骨架屏

微信小步调-天生骨架屏

概述

骨架屏是页面的一个空缺版本，通常会在页面完全渲染之前，通过一些灰色的区块大抵勾勒出表面，待数据加载完成后，再更换成真实的内容。微信小步调提供了自动天生骨架屏代码的本领。
步调

第一步：
点击微信小步调开发工具的右下角：

会天生2个骨架屏相干的文件：

第二步：
将这2个文件放在指定目次下，接着引用骨架屏并使用：
wxml:

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

复制代码

wxss:

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

复制代码

引用模版：

1. <template is="skeleton"   />

复制代码

控制表现：

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

复制代码

1. Page({
2.   data: {   
3.     isLoading: false,
4.   },  
5.   showSkeleton() {
6.     let that = this
7.     this.setData({
8.       isLoading: true,
9.     })
10.     setTimeout(function () {
11.       that.setData({
12.         isLoading: false,
13.       })
14.     }, 2000)
15.   },  
16. })

复制代码