digitalMen/components/wike-skeleton/wike-skeleton.vue

<template>
	<view>
		<view class="placeholder question" v-for="(item,index) in size" :key="index">
			<block v-if="type==='question'">
				<view class="ph-title"></view>
				<view class="ph-name"></view>
				<view class="ph-text"></view>
				<view class="ph-text"></view>
			</block>
			<block v-if="type==='user'">
				<view class="ph-avatar"></view>
				<view class="user-info">
					<view class="ph-name"></view>
					<view class="ph-text"></view>
					<view class="ph-text"></view>
				</view>
			</block>
			
			
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			count: {
				type: Number,
				default: 1
			},
			type: {
				type: String,
				default: "question"
			}
		},
		data() {
			return {
				size: this.myReduce(this.count)
			}
		},
		methods: {
			// reduce 斐波那契数列
			myReduce(n) {
				return [...new Array(n).keys()].reduce((t, v) => {
					v > 1 && t.push(t[v - 1] + t[v - 2])
					return t
				}, [1, 1])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.placeholder {
		background: var(--empty-bg--);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		margin: 0 24rpx 20rpx;
		padding: 40rpx 32rpx;
	}

	.placeholder:nth-of-type(1) {
		margin-top: 0;
	}

	.placeholder [class*="ph-"] {
		background-color: #fafbfc;
		margin-bottom: 24rpx;
		overflow: hidden;
		position: relative;
		width: 100%;
	}

	.placeholder [class*="ph-"]::before {
		animation-duration: 1.5s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		animation-name: PlaceholdersAnimation;
		animation-timing-function: linear;
		background: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .02) 20%, transparent 40%);
		content: "";
		height: 100%;
		left: 0;
		max-width: 1000px;
		position: absolute;
		top: 0;
		width: 100vw;
	}

	.placeholder [class*="ph-"]:last-child {
		margin-bottom: 0;
	}

	.placeholder.user {
		flex-direction: row;
	}

	.placeholder.user .user-info {
		flex: 1;
	}

	.placeholder .ph-title {
		height: 54rpx;
	}

	.placeholder .ph-name {
		height: 48rpx;
		width: 240rpx;
	}

	.placeholder .ph-text {
		height: 32rpx;
		margin-bottom: 16rpx;
	}

	.placeholder .ph-avatar {
		border-radius: 50%;
		flex-shrink: 0;
		height: 88rpx;
		margin-right: 24rpx;
		width: 88rpx;
	}

	@-webkit-keyframes PlaceholdersAnimation {
		0% {
			transform: translate3d(-30%, 0, 0);
		}

		100% {
			transform: translate3d(100%, 0, 0);
		}
	}

	@keyframes PlaceholdersAnimation {
		0% {
			transform: translate3d(-30%, 0, 0);
		}

		100% {
			transform: translate3d(100%, 0, 0);
		}
	}
</style>