微信小程序-生成骨架屏

xiangxiongfly9152024-12-18 15:29

文章目录

微信小程序-生成骨架屏
- 概述
- 步骤

微信小程序-生成骨架屏

概述

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

步骤

第一步：

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

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

第二步：

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

wxml:

复制代码

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

wxss:

复制代码

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

引用模版：

复制代码

<template is="skeleton"   />

控制显示：

xml 复制代码

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

js 复制代码

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