frontend/examking-app/plugins/uview-ui/components/u-skeleton/u-skeleton.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<view v-if="loading" :style="{
		width: windowWinth + 'px', 
		height: windowHeight + 'px', 
		backgroundColor: bgColor, 
		position: 'absolute', 
		left: left + 'px', 
		top: top + 'px', 
		zIndex: 9998, 
		overflow: 'hidden'
	}"
	 @touchmove.stop.prevent>
		<view v-for="(item, index) in RectNodes" :key="$u.guid()" :class="[animation ? 'skeleton-fade' : '']" :style="{
			width: item.width + 'px', 
			height: item.height + 'px', 
			backgroundColor: elColor, 
			position: 'absolute', 
			left: (item.left - left) + 'px', 
			top: (item.top - top) + 'px'
		}"></view>
		<view v-for="(item, index) in circleNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
			width: item.width + 'px', 
			height: item.height + 'px', 
			backgroundColor: elColor, 
			borderRadius: item.width/2 + 'px', 
			position: 'absolute', 
			left: (item.left - left) + 'px',
			top: (item.top - top) + 'px'
		}"></view>
		<view v-for="(item, index) in filletNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
			width: item.width + 'px', 
			height: item.height + 'px', 
			backgroundColor: elColor, 
			borderRadius: borderRadius + 'rpx', 
			position: 'absolute', 
			left: (item.left - left) + 'px',
			top: (item.top - top) + 'px'
		}"></view>
	</view>
</template>

<script>
	/**
	 * skeleton 骨架屏
	 * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
	 * @tutorial https://www.uviewui.com/components/skeleton.html
	 * @property {String} el-color 骨架块状元素的背景颜色（默认#e5e5e5）
	 * @property {String} bg-color 骨架组件背景颜色（默认#ffffff）
	 * @property {Boolean} animation 骨架块是否显示动画效果（默认false）
	 * @property {String Number} border-radius u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx（默认10）
	 * @property {Boolean} loading 是否显示骨架组件，请求完成后，将此值设置为false（默认true）
	 * @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
	 */
	export default {
		name: "u-skeleton",
		props: {
			// 需要渲染的元素背景颜色，十六进制或者rgb等都可以
			elColor: {
				type: String,
				default: '#e5e5e5'