微信小程序-生成骨架屏

文章目录

微信小程序-生成骨架屏

概述

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

步骤

第一步:

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

会生成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)
  },  
})
相关推荐
拼图2092 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg6683 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
程序员陆通3 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
MonkeyKing_sunyuhua6 小时前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序
mg6686 小时前
微信小程序入门实例_____从零搭建你的第一个微信小程序
微信小程序·小程序
bilichen0066 小时前
微信小程序使用wx.chooseImage上传图片时进行压缩,并添加时间水印
微信小程序·小程序
皮皮灬虾7 小时前
微信小程序下单页—地址列表页—新增地址页 页面交互
微信小程序·小程序·交互
源码_V_saaskw10 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台
Q_Q196328847510 天前
python基于微信小程序的广西文化传承系统
开发语言·spring boot·python·微信小程序·django·flask
kingbal10 天前
uniapp:微信小程序胶囊「复制链接」灰色处理
微信小程序·小程序·uni-app