微信小程序,骨架屏的使用。简单两步,瞬间高大上

骨架屏使用


骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。通常在小程序中,我们需要手工维护骨架屏的代码,当业务变更时,同样需要对骨架屏代码进行调整。为了开发的便利,开发者工具提供了自动生成骨架屏代码的能力
https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html  文档地址

1、可在 project.config.json 增加字段 skeleton-config 进行骨架屏相关配置,页面配置会覆盖掉全局配置
2、先去配置,修改完配置之后,再去三个点  生成骨架屏


eg:
页面的wxml:
		<import src="./cart.skeleton.wxml"></import>
		<template is="skeleton" wx:if="{
     {load}}"></template>
页面的wxss:
		@import "./cart.skeleton.wxss";
页面的js
		  attached(){
     
            // 过3秒钟 改变load状态
            setTimeout(()=>{
     
              this.setData({
     
                load:false
              })
            },1000)
          },

你可能感兴趣的:(小程序,uni-app,小程序,前端)