一五一、web+小程序骨架屏整理

news/2024/10/18 0:32:33/

骨架屏介绍

请点击查看智能小程序骨架屏

车载小程序骨架屏

车载小程序为方便开发者设置骨架屏,在智能小程序的基础上抽取出骨架屏模板,开发者只需要在 skeleton 文件夹下配置config.json(page 和骨架屏的映射关系文件)即可生效骨架屏。
例如:

骨架屏模板

横向 tab 卡片布局

https://iov-www.su.bcebos.com/mini-program/skeleton/skeleton-tab-card.html

image.png

配置:

//skeleton/config.json
{"pages/index/index": "skeleton/page/skeleton-tab-card"
}

横向卡片布局

https://iov-www.su.bcebos.com/mini-program/skeleton/skeleton-card.html

image.png

配置:

//skeleton/config.json
{"pages/index/index": "skeleton/page/skeleton-card"
}

纵向 tab 双列表布局

https://iov-www.su.bcebos.com/mini-program/skeleton/skeleton-tab-list-db.html

image.png

配置:

//skeleton/config.json
{"pages/index/index": "skeleton/page/skeleton-tab-list-db"
}

纵向双列表布局

https://iov-www.su.bcebos.com/mini-program/skeleton/skeleton-list-db.html

image.png

配置:

//skeleton/config.json
{"pages/index/index": "skeleton/page/skeleton-list-db"
}

纵向单列表布局

https://iov-www.su.bcebos.com/mini-program/skeleton/skeleton-list-single.html

image.png

配置:

//skeleton/config.json
{"pages/index/index": "skeleton/page/skeleton-list-single"
}

AB 容器布局

https://iov-www.su.bcebos.com/mini-program/skeleton/skeleton-card-ab.html

image.png

配置:

//skeleton/config.json
{"pages/index/index": "skeleton/page/skeleton-card-ab"
}

卡片+列表布局

https://iov-www.su.bcebos.com/mini-program/skeleton/skeleton-card-list.html

image.png

配置:

//skeleton/config.json
{"pages/index/index": "skeleton/page/skeleton-card-list"
}

tab+单容器布局

https://iov-www.su.bcebos.com/mini-program/skeleton/skeleton-tab-content.html

image.png

配置:

//skeleton/config.json
{"pages/index/index": "skeleton/page/skeleton-tab-content"
}

地图布局

https://iov-www.su.bcebos.com/mini-program/skeleton/skeleton-map.html

image.png

配置:

//skeleton/config.json
{"pages/index/index": "skeleton/page/skeleton-map"
}

http://www.ppmy.cn/news/69820.html

相关文章

stm32f407单片机上通过HAL库实现can总线数据的收发

最近在使用can总线,由于这个以前接触的比较少,所以调试代码的时候直接是下载的正点原子的例程,在这个基础上修改调试的。现在将调试中遇到的问题,总结一下,避免以后踩坑。目前写了一个查询方式的,一个中断方…

C++primer plus

第四章 1.如何声明下述数据? a. actor是由30个char组成的数组 b.betsie是由100个short组成的数组 c.chuck是由13个float组成的数组 d.dipsea是由64个long double组成的数组 2.使用模板类array而不是数组来完成问题1。 3.声明一个包含5个元素的int数组&#x…

学习RHCSA的day.03

目录 2.6 Linux系统的目录结构 2.7 目录操作命令 2.8 文件操作命令 2.6 Linux系统的目录结构 1、Linux目录结构的特点 分区加载于目录结构: 使用树形目录结构来组织和管理文件。整个系统只有一个位于根分区的一个根目录(树根)、一棵树。…

SolidWorks二次开发(C#)-环境搭建

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1、前言2、按照Solidworks2022和VS20223、在VS2022中创建一个Winform工程4、添加SolidWorks动态链接库5、在按钮中添加代码6、测试 1、前言 做了有些SolidWorks二次…

浅谈Koa2框架

框架和库 什么是框架 前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件。 比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件&#xf…

C语言操作符详解(上)

C语言操作符详解&#xff08;上&#xff09; 前言1. 算术操作符2. 移位操作符2.1 左移操作符(<<)2.2 右移操作符&#xff08;>>&#xff09; 3. 位操作符3.1 按位与&#xff08;&&#xff09;3.2 按位或&#xff08;|&#xff09;3.4 按位异或&#xff08;^&am…

node笔记_koa框架的路由

文章目录 ⭐前言⭐koa 原生路由写法⭐引入 koa-router&#x1f496; 安装koa-router&#x1f496; 动态读取路径文件作为路由 ⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文介绍koa框架的路由。 往期文章 node_windows环境变量配置 node_npm发布包 linux_配置no…

Java面向对象程序设计实验报告(实验三 继承的练习)

✨作者&#xff1a;命运之光 ✨ 专栏&#xff1a;Java面向对象程序设计实验报告 ​ 目录 ✨一、需求设计 ✨二、概要设计 ✨三、详细设计 ✨四、调试结果 ✨五、测试结果 ✨附录&#xff1a;源程序代码&#xff08;带注释&#xff09; demo3类 Person类 Student类 …