当前位置: 首页 > article >正文

微信小程序引入骨架屏

骨架屏的使用越来越广泛。在微信小程序中使用骨架屏如果自己实现,不同的页面对应不同的骨架屏,会有一定难度;不过,微信小程序已经提供生成骨架屏功能,使得我们在开发中非常方便,下面介绍如何生成

在生成骨架屏之前,先确保微信开发者工具是 1.03.2006032 或 1.04.2006032 以上的版本

1、生成骨架屏代码文件

找到要生成骨架屏的页面,并进行预览,找到模拟器面板右下角三点处

 

点击生成骨架屏

 

点击 确定

 

生成 wxml 和 wxss 骨架屏文件

 

2、页面使用

(1)、在需要使用骨架屏的页面引入生成的骨架屏 wxml 文件,并将骨架屏代码通过小程序模板(template)的方式引入

<import src="product.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />


如下图

(2)、在 wxss 文件中引入骨架屏的 wxss 样式文件

@import "product.skeleton.wxss";


如下图

 

(3)、在 js 文件中添加骨架屏显示与隐藏的控制逻辑

data: {
  productList: [],
  loading: true
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
  let products = [1,2,3,4,5,6,7,8,9,10]
  setTimeout(() => {
    this.setData({
      productList: products,
      loading: false
    })
  }, 3000)
},

通过 loading 的 true 或 false,来控制骨架屏的显示与隐藏

setTimeout 模拟后台请求返回数据

3、效果如下


http://www.kler.cn/a/9558.html

相关文章:

  • 深入解析 OpenHarmony 构建系统-4-OHOSLoader类
  • 算法——移除链表元素(leetcode203)
  • stringUtils详细解释
  • Kubernetes在容器编排中的应用
  • Linux相关习题-gcc-gdb-冯诺依曼
  • 河南省的一级科技查新机构有哪些?
  • pinia的使用以及持久化存储
  • JS中的宏任务与微任务
  • 壁纸保存下
  • MLOps : 机器学习运维
  • 入门IC必读书目,你想知道的都在这里
  • Nacos在derby模式下如何更改密码?
  • 算法每日一题:P2089 烤鸡 -DFS练习
  • 学生台灯哪个品牌的专业?盘点小学生台灯品牌排行榜
  • 如何用 YonBuilder 构建线索管理应用
  • 【hello Linux】Linux软件管理器yum
  • shell 脚本 echo 往串口终端输出调试信息
  • Elasticsearch:保留字段名称
  • 面试官:你知道SPI吗?Java、Spring、Dubbo三者SPI机制的原理和区别了解吗?
  • JetBrains GoLand 2023安装激活教程
  • python传参数的方法
  • springbootApplication注解详解
  • 【Kafka】日志收集分析平台搭建--问题总结(一)
  • 出道即封神的ChatGPT,现在怎么样了?ChatGPT想干掉测试人员,做梦去吧
  • chatGPT文章生成插件-用chatGPT写文章接入网站
  • Unreal Engine的自定义扩展思路