uniapp兼容h5和小程序等 骨架屏组件

最新推荐文章于 2025-03-12 18:16:46 发布
最新推荐文章于 2025-03-12 18:16:46 发布
阅读量265 收藏
点赞数 2
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46591612/article/details/144392410
版权

skeleton.vue代码

<template>
	<view>
		<view class="skeleton" v-show="loading" :class="[animationClass]" v-for="skeleton in count">
			<view class="row" :style="{'flex-direction':direction}" >
				<view v-for="(item,index) in row" :key="item" class="row-item" :style="{'margin-right':mright}" >
					<view :style="{width:rowWidth,height:rowHeight,'border-radius':radius}"  v-if="variant === 'image'" :class="[varianttype]">
						<svg  viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
						    <path d="M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z"/>
						</svg>
					</view>
					<view v-else :class="[varianttype]" :style="{width:rowWidth,height:rowHeight}" class="row-class"></view>
				</view>
			</view>
		</view>
		<slot v-if="!loading"></slot>
	</view>
</template>
<script>
	export default {
		props: {
			//是否使用动画
			animate: {
				type: Boolean,
				default: false
			},
			//渲染多少个 template, 建议使用尽可能小的数字
			count: {
				type: Number,
				default: 1
			},
			//是否显示 skeleton 骨架屏
			loading: {
				type: Boolean,
				default: true
			},
			//骨架屏段落数量
			row: {
				type: Number,
				default: 1
			},
			//段落行宽度，默认为100%
			rowWidth:{
				type: String | Number,
				default: '100%'
			},
			//段落行高度
			rowHeight:{
				type: String | Number,
			},
			//圆角的边框
			radius:{
				type: String | Number
			},
			//调整主轴方向
			direction:{
				type: String,
				default: 'column'
			},
			//右侧外边距
			mright:{
				type: String | Number
			},
			//当前显示的占位元素的样式
			variant: {
				type: String,
				values: [
				      'circle',
				      'h1',
				      'h3',
				      'text',
				      'caption',
				      'p',
				      'image',
				      'button',
				],
				default: 'text'
			}
		},
		computed: {
			animationClass() {
				return [this.animate ? 'skeleton_animation' : '']
			},
			varianttype(){
				return [this.variant ? 'skeleton__'+this.variant : 'text']
			}
		},
		data() {
			return {
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 占位元素的样式 */
	$skeleton-h1-height: 20px;
	$skeleton-h3-height: 18px;
	$skeleton-caption-height: 12px;
	$skeleton-button-height:40px;
	$skeleton-button-width:64px;
	$skeleton-circle-width:36px;
	$skeleton-circle-height:36px;
	$skeleton-text-height:13px;
	$skeleton-p-height:13px;
	$skeleton-image-width:200px;
	$skeleton-image-height:200px;
	$skeleton-image-svg-width:22%;
	$skeleton-image-svg-height:22%;
	
	.skeleton {
		background-color: #fff;
	}
	.row{
		display: flex; 
	}
	.row-class {
		width: 100%;
		height: 16px;
		margin-top: 12px;
		display: flex;
	}
	.row-item{
		width: 100%;
	}
	.row-item:nth-last-child(1){
		margin-right: 0 !important;
	}
	.skeleton_animation .row-class,.skeleton__image {
		background: linear-gradient(
		90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);
		background-size: 400% 100%;
		animation: skeleton-loading 1.4s ease infinite;
	}

	@keyframes skeleton-loading{
		0%{
			background-position:100% 50%
		}
		to{
			background-position:0 50%
		}
	}
	.skeleton__h1 {
		height: $skeleton-h1-height;
	}
	.skeleton__h3 {
		height: $skeleton-h3-height;
	}
	.skeleton__caption {
	    height: $skeleton-caption-height;
	}
	.skeleton__button {
	    height: $skeleton-button-height;
		width: $skeleton-button-width;
		border-radius: 4px;
	}
	.skeleton__circle {
	    height: $skeleton-circle-height;
		width: $skeleton-circle-width;
		border-radius: 50%;
		line-height: $skeleton-circle-height;
	}
	.skeleton__text {
	    width: 100%;
	    height:  $skeleton-text-height;
	}
	.skeleton__p {
		flex-shrink: 0;
	    width: 100%;
	    height: $skeleton-p-height;
	}
	.skeleton__image {
		margin-right: 8px;
		width: $skeleton-image-width;
		height:$skeleton-image-height;
		background-color: #f2f2f2;
	    display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0;
	}
	.row-item:nth-last-child(1) .skeleton__image{
		margin-right: 0px;
	}
	.skeleton__image svg {
	    fill: #dcdde0;
	    width: $skeleton-image-svg-width;
	    height: $skeleton-image-svg-height;
	}
</style>

 ## skeleton 骨架屏 示例代码

# skeleton 骨架屏

在需要等待加载内容的位置设置一个骨架屏，用法同 [elementui Skeleton 骨架屏](https://element.eleme.io/#/zh-CN/component/skeleton)类似。

## 属性说明

|属性名|类型|默认值|说明|
| -- | -- | --|--|
| animate | Boolean | false | 是否使用动画 |
| count | Number | 1 | 渲染多少个 template, 建议使用尽可能小的数字 |
| loading | Boolean | false | 是否显示 skeleton 骨架屏 |
| row | Number | 1 | 骨架屏段落数量 |
| rowWidth | String/Number | 100% | 段落行宽度，默认为100% |
| rowHeight | String/Number |  | 段落行高度，无默认值 |
| radius | String/Number |  | 圆角的边框，无默认值 |
| direction | String |column | 调整主轴方向，默认值为 column |
| mright | String/Number |  | 右侧外边距，无默认值 |
| variant | String |text| 当前显示的占位元素的样式，可选值 p / text / h1 / h3 / caption / button / image / circle |

## 示例代码

```html
<template>
	<view>
		<view class="content">
			<skeleton :row="4" direction='row' rowWidth="80px" radius='50%' rowHeight="80px" :animate='true' :loading='loading' variant='image'>
				<view class="imagelist-1">
					<image src='https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80'></image>
					<image src='https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80'></image>
					<image src='https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80'></image>
					<image src='https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80'></image>
				</view>
			</skeleton>
			<br/>
			<skeleton :row="4" direction='row'  rowWidth="80px" rowHeight="80px" :animate='true' :loading='loading' variant='image'>
				<view class="imagelist-2">
					<image src='https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80'></image>
					<image src='https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80'></image>
					<image src='https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80'></image>
					<image src='https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80'></image>
				</view>
			</skeleton>
			<br/>
			<skeleton :row='3' direction='column'  rowWidth="100%" rowHeight="13px" :animate='true' :loading='loading' variant='p'>
				<view >
				 <p>测试新闻标题1号</p>
				 <p>测试新闻标题2号</p>
				 <p>测试新闻标题3号</p>
				</view>
			</skeleton>
			<br/>
			<skeleton rowWidth="80px"  direction='row'  radius='50%' rowHeight="80px" :animate='true' :loading='loading' variant='image'>
				<view >
					<image src='https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80'></image>
				</view>
			</skeleton>
			
			<skeleton  :animate='true' :loading='loading' variant='h1'>
				<view >
					<h1>标题</h1>
				</view>
			</skeleton>
			<skeleton :row='2' mright='8px' direction='row' :animate='true' :loading='loading' variant='text'>
				<view >
					<text>描述</text>
				</view>
			</skeleton>
			<skeleton :row='3' mright='8px' direction='row' :animate='true' :loading='loading' variant='text'>
				<view >
					<text>描述</text>
				</view>
			</skeleton>
			<skeleton :row='4' mright='8px' direction='row' :animate='true' :loading='loading' variant='text'>
				<view >
					<text>描述</text>
				</view>
			</skeleton>
	</view>
	</view>
</template>

<script>
	import skeleton from '../../components/lidao-skeleton/skeleton.vue'
	export default {
		data() {
			return {
				loading: true // 是否显示骨架屏组件
			}
		},
		onLoad() {
			// 通过延时模拟向后端请求数据，调隐藏骨架屏
			setTimeout(() => {
				this.loading = false;
			}, 3000)
		},components:{
			skeleton,
		}
	}
</script>
<style>
page{
	padding: 12px;
}
image{
	width: 80px;
	height: 80px;
	margin-right: 8px;
}
.imagelist-1 image{
	border-radius: 50%;
}
.imagelist-1 image:nth-last-child(1){
	margin-right: 0;
}
.imagelist-2 image:nth-last-child(1){
	margin-right: 0;
}
</style>

```

## 效果图

![图片描述](https://doc.shiyanlou.com/courses/7763/1693782/69bc26eb1c98c9e71476def878a517b1-0)

吴登峰super
关注
小程序领域H5开发的关键要点解析
小程序开发
05-06 783
随着移动互联网的快速发展，小程序以其"无需下载、即点即用"的特性成为企业移动化布局的核心载体。然而，传统小程序开发在面对高频迭代的营销活动页面、复杂动态内容展示等场景时，存在开发效率低、跨平台复用难等问题。H5技术凭借其动态性强、开发周期短、跨终端适配灵活的优势，成为小程序生态的重要补充。本文聚焦小程序与H5混合开发的关键技术点，涵盖架构设计、通信机制、性能优化、兼容性处理、安全策略等核心领域，通过理论分析与实战案例结合的方式，构建完整的技术知识体系。背景与基础概念：明确技术边界与核心术语。
uniapp u-view插件中骨架屏的使用
qq_37455326的博客
01-13 1196
【代码】uniapp u-view插件中骨架屏的使用。
uniapp实战 —— 骨架屏
朝阳39的博客
12-08 3010
1. 自动生成骨架屏代码 在微信开发者工具中，预览界面点击生成骨架屏 确定后，会自动打开骨架屏代码文件 pages\index\index.skeleton.wxml 2. 将骨架屏代码转换为vue文件 在项目中新建文件 src\pages\index\components\skeleton.vue 将pages\index\index.skeleton.wxml中的代码复制到 skeleton.vue 中 删除所有的注释和无接口访问的部分（如顶部的导航栏），如下图所示，通过 i
uniapp开发微信小程序配置骨架屏快捷方式
最新发布
zhou404的博客
03-12 265
使用微信开发者工具的生成骨架屏功能，如图所示：该功能会微信开发者工具的文件夹下生成两个文件分别是和文件名.skeleton.wxss。
uni-app、百度小程序、微信小程序、骨架屏
weixin_43818835的博客
11-29 1543
最近用uni-app做了一款《中国好故事》百度小程序、h5、微信小程序三个版本，正在上线阶段， 所以有时间最近总结一下遇到的问题 百度小程序白屏总是拒绝审核通过，所以新学习了一下骨架屏，看了众多资料，总结就是一句话： copy一份与数据展示页（以下称为真实页面）全等的一个静态页面（以下称为复制页面）。 ps：当然复制页面中的内容框的宽高和位置可以动态的从真实页面获取，但这个时间节点是真实页面...
正确使用uniapp搭配微信开发者工具自带的骨架屏功能，生成骨架屏
weixin_44953151的博客
09-24 4704
2、在index.vue中，把刚刚生成的index.skeleton.wxml和index.skeleton.wxss两个文件复制到index.vue文件里面，注意wxml文件应该放在template标签中，wxss的文件内容应该放在style标签中。重点：把index.skeleton.wxml和index.skeleton.wxss文件中的（is=““和data-event-opts=””）的整个属性删掉。很多人都知道微信开发者工具自带生成骨架屏的功能，但是却不知道怎么使用，接下来教大家使用。
uni-app vue3 使用骨架屏 以及实现骨架屏
2303_77072102的博客
10-23 1417
*query.selectAll 参数就是class类名 可以获取到所有带skeleton-circle类名的节点 这个类名可以自己起 *//*query.selectAll 参数就是class类名 可以获取到所有带skeleton-rect类名的节点 这个类名可以自己起*//* 获取当前组件的实例 vue2里面是用this vue3里面没有this就要换成getCurrentInstance()来获取实例 *//* 我这边用的是定时器来模拟后端数据异步返回的结果从而实现骨架屏 */
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 958
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
扫码点餐小程序开发与商家后台管理视频教程
1. **uniapp框架**：uniapp是一个基于Vue.js开发的多端开发框架，能够编写一次代码，同时发布到iOS、Android、H5、微信小程序等多个平台。教程中会讲解如何利用uniapp创建和管理扫码点餐小程序的前端界面。 2. **...
骨架屏：用于数据加载时的占位图显示，uniapp插件市场。前端工程师强推。
阿小绿的博客
07-17 2935
哈喽大家好，我又来了。今天什么也不搞，就是来跟大家推荐一下骨架屏（如下图）。 来源：uniapp插件市场 推荐指数：⭐⭐⭐⭐ 体验感：妈妈再也不用担心我的加载很突兀了 如果你们还没能看懂，下面就放效果。 原始效果： 缺点很明显，就是很突兀。【闪一下的原因是因为我设置了原始值，加载数据是有时间的。数据量不算很多所以请求起来就会很快，导致我们看起来就是闪一下。而且还会看到我的默认显示值，会让用户觉得是我们的项目卡了】 加上骨架屏之后的效果： 好的地方不言而喻。 强推哦，最后插件地址：https://ext
uni-app 骨架屏实现
m0_62708507的博客
03-23 2773
1.创建一个骨架屏组件skeleton.vue。
SkeletonX：chrome插件：自动生成骨架屏
02-24
骷髅X 参考资料
uniapp 小程序实现使用骨架屏
abc123abccc的博客
07-20 727
大家好，今天测试大佬，让我在项目中使用骨架屏技术，优化一下用户的体验，当时第一反应是，可不可以使用vue3内置组件 Suspense 来实现，使用后，发现报了一堆红。然后会有弹框提示，确定后会在微信开发者工具当前页面同级目录下生成xxx.skeleton.wxml和xxx.skeleton.wxss两个文件，分别为骨架屏代码的模板和样式。骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容，这样极大的优化了用户的体验。
uni-app如何生成骨架屏
qq_38003956的博客
07-11 5094
uni-app如何生成骨架屏
uni-app开发微信小程序：首页骨架屏
听海边涛声
09-18 1604
uni-app开发微信小程序：首页骨架屏
uniapp 微信小程序添加骨架屏 优化页面加载过程用户体验
nanren_nanren的博客
05-07 1296
骨架屏是一种在页面加载过程中，以占位符形式展示页面结构的技术。它通过显示简单的灰色块和线条，让用户在等待内容加载时获得视觉反馈，提高了用户的满意度。
骨架屏之 Webpack插件篇
绿足 博客
10-06 1159
背景 我们会遇到一些情况， 当前的项目不需要服务端渲染， 那么我们又当如何快速自动化生成骨架屏呢？ 带着这个问题，本章将带大家一起使用另一个美到粗暴的方式： 通过webpack 插件来实现骨架屏效果。 设计思想 这里假设你的项目是通过webpack 构建生成的静态部署资源。 并且你的构建过程中 ...
使用 Vite 插件自动化实现骨架屏
程序员成长指北
10-12 1968
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群作者：橙红年代原文：https://juejin.cn/post/7152406737100734495骨架屏在SPA应用中有两个显著提升用户体验的作用避免页面初始化加载时的空白，体验介于SSR和完全等待页面初始化完成之间避免部分路由组件需要加载数据完成之后才渲染的空白骨架屏会给用户一种内容已经返...
uni-app第二篇补充（平台判断、网络请求、骨架屏）
weixin_49030317的博客
05-16 762
运行环境判断 uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换 在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境 devolopment 开发环境 production 生产环境 let baseurl = null if(process.env.NODE_ENV=='development'){ // 开发环境 baseurl = "ht
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值