页面添加骨架屏

最新推荐文章于 2023-09-21 23:00:23 发布

Raken12

最新推荐文章于 2023-09-21 23:00:23 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Raken12/article/details/121947695

版权

前端

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在页面由多个模块配置而成的时候，有时候有些模块展示较慢，会出现闪屏的样子，为了解决这个问题，用到了骨架屏。
那么怎么使用呢, 详见插件安装与使用
这里需要注意的是在skeleton.config.js中配置好需要加骨架屏的文件路径后，需要在相应的文件中手动写入相对应的class的div

在根目录下创建 skeleton.config.js文件，写入下面代码

const path = require(`path`);

module.exports = [
	// pc
	{
	    headless: false,
	    url: `http://localhost:8080/abc.html`, // 可直接跳转该页面的地址
	    output: {
	      filepath: path.resolve(__dirname, `./src/app/abc.ejs`), // 文件相对路径
	      injectSelector: `.test-wrapper-pc`, //放骨架屏的容器
	    },
	    device: `pc`, // 设备
	    viewport: {
	      width: 2560,
	      height: 1500,
	    },
	    userAgent:
	      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36',
	    skeletonColor: '#eee',
	    background: '#fff',
	    mediaQuery: `@media only screen and (min-width: 1024px)`,
	  },
	  // mobile
	  {
	    headless: false,
	    url: `http://localhost:8080/abc.html`,
	    output: {
	      filepath: path.resolve(__dirname, `./src/app/abc.ejs`),
	      injectSelector: `.test-wrapper-m`,
	    },
	    viewport: {
	      width: 2560,
	      height: 1500,
	    },
	    userAgent:
	      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36',
	    skeletonColor: '#eee',
	    background: '#fff',
	    mediaQuery: `@media only screen and (max-width: 1024px)`,
 	 },
]；

其次，需要在相对应的文件下写入div，并且命令行运行npm run skeleton 会自动生成骨架屏代码，
在这里插入图片描述

以上该页面的骨架屏就添加完毕。
eee…在我以为已经做完了的时候，测试同事有了小小的意见，由于这个骨架屏的代码是根据网页的样式自动生成的，但是又不是完全和页面一样，可能会比较丑，于是想到了一个笨方法，手动调整骨架屏的样式：也就是在已经生成的骨架屏代码中，根据后台调试来修改样式。虽然麻烦，但是生效了。