# 骨架屏

skeleton 骨架屏,数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen替代 。

# 组件结构

<view class="tui-skeleton-cmomon tui-skeleton-box" :style="{width: winWidth+'px', height:winHeight+'px', backgroundColor:backgroundColor}">
	<view class="tui-skeleton-cmomon" v-for="(item,index) in skeletonElements" :key="index" :style="{width: item.width+'px', height:item.height+'px', left: item.left+'px', top: item.top+'px',backgroundColor: skeletonBgColor,borderRadius:getRadius(item.skeletonType,borderRadius)}"></view>
	<view class="tui-loading" :class="[getLoadingType(loadingType)]" v-if="isLoading"></view>
</view>

# 组件脚本

<script>
	export default {
		name: "tuiSkeleton",
		
		...省略n行
		
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
selector String 选择器(外层容器) tui-skeleton
backgroundColor String 外层容器背景颜色 #fff
skeletonBgColor String 骨架元素背景颜色 #e9e9e9
skeletonType Array 骨架元素类型:矩形,圆形,带圆角矩形 ["rect", "circular", "fillet"]
borderRadius String 圆角值,skeletonType=fillet时生效 16rpx
preloadData Array 骨架屏预生成数据,当传入该属性值时,则不会再次查找子节点信息,数据结构与data中skeletonElements一致 []
isLoading Boolean 是否需要loading true
loadingType Number loading类型[1-10] 1

# methods

# 示例

... 此处省略n行,下载源码查看

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/skeleton/skeleton

# H5二维码

# 小程序二维码