微信小程序-生成骨架屏
文章目录
- 微信小程序-生成骨架屏
- 概述
- 步骤
微信小程序-生成骨架屏
概述
骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。微信小程序提供了自动生成骨架屏代码的能力。
步骤
第一步：
点击微信小程序开发工具的右下角：
会生成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 = this
this.setData({
isLoading: true,
})
setTimeout(function () {
that.setData({
isLoading: false,
})
}, 2000)
},
})