ThorUI文档

# tui-skeleton 骨架屏

介绍

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

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiSkeleton from "@/components/thorui/tui-skeleton/tui-skeleton.vue"
export default {
	components:{
		tuiSkeleton
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 √ √ √ √ √ √ √

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-skeleton": "/components/thorui/tui-skeleton/tui-skeleton"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

示例只为了演示，所以样式写在了行内。skeletonShow 用来控制骨架屏的显示隐藏。骨架内容外层容器class默认为 tui-skeleton，可通过 selector 属性进行修改。骨架元素类型目前支持：矩形，圆形，带圆角矩形。

<!--uni-app-->
<view>
	<tui-skeleton v-if="skeletonShow"></tui-skeleton>
	<view class="tui-skeleton">
		<image src="https://www.thorui.cn/img/wait.gif" style="width: 100%;height:375rpx" mode="widthFix" class="tui-skeleton-rect"></image>
		<view style="font-size: 28rpx;padding: 20rpx;box-sizing: border-box;text-align: right;"><text class="tui-skeleton-rect">---我知道你会来，所以我会等。</text></view>
	</view>
</view>

<!--微信小程序-->
<view>
	<tui-skeleton wx:if="{{skeletonShow}}"></tui-skeleton>
	<view class="tui-skeleton">
		<image src="https://www.thorui.cn/img/wait.gif" style="width: 100%;height:375rpx" mode="widthFix" class="tui-skeleton-rect"></image>
		<view style="font-size: 28rpx;padding: 20rpx;box-sizing: border-box;text-align: right;"><text class="tui-skeleton-rect">---我知道你会来，所以我会等。</text></view>
	</view>
</view>

//uni-app
export default {
	data() {
		return {
			skeletonShow: true
		};
	},
	onLoad() {
		//模拟
		setTimeout(() => {
			this.skeletonShow = false;
		}, 1800);
	}
}

//微信小程序
Page({
  data: {
    skeletonShow: true
  },
  onLoad: function (options) {
    setTimeout(() => {
      this.setData({
        skeletonShow:false
      })
    }, 1800);
  }
})

使用提示

骨架内容外层容器需要添加class为 selector 属性值，默认为 tui-skeleton。

骨架元素需要添加对应元素类型class：tui-skeleton-rect （矩形），tui-skeleton-circular(圆形)，tui-skeleton-fillet(带圆角矩形)。

# Slots

none

# 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 false
loadingType Number loading类型(1~10) 1
active V1.7.2+ Boolean 是否展示动画效果 true
preloadData属性值数据格式

通过 uni.createSelectorQuery() (opens new window) 或者 wx.createSelectorQuery() (opens new window) 返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

[{
	"id":"",
	"dataset":{},
	"left":0,
	"right":375,
	"top":0,
	"bottom":187,
	"width":375,
	"height":187,
	"skeletonType":"rect"
},
{
	"id":"",
	"dataset":{},
	"left":164.84375,
	"right":365,
	"top":201,
	"bottom":220,
	"width":200.15625,
	"height":19,
	"skeletonType":"rect"
}]

# Events

none

# 预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-calendar 日历 →