微信小程序-生成骨架屏

文章目录

微信小程序-生成骨架屏

概述

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

步骤

第一步:

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

会生成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)
  },  
})
相关推荐
半生过往4 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw4 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者9 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮10 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
The_era_achievs_hero17 小时前
UniappDay03
vue.js·微信小程序·uni-app
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
The_era_achievs_hero2 天前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
黑马源码库miui520863 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
郭邯3 天前
小程序视图层学习笔记
微信小程序
拾光拾趣录4 天前
小程序双线程架构:为什么需要两个线程才能跳舞?
前端·微信小程序