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>

// data 数据 及 方法
export default {
  data() {
  	return {
  		skeletonShow: true
  	};
  },
  onLoad() {
  	//模拟
  	setTimeout(() => {
  		this.skeletonShow = false;
  	}, 1800);
  }
}

<!--微信小程序-->
<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>

// data 数据 及 方法
Page({
  data: {
    skeletonShow: true
  },
  onLoad: function (options) {
    setTimeout(() => {
      this.setData({
        skeletonShow:false
      })
    }, 1800);
  }
})

// Make sure to add code blocks to your code group

使用提示

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

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

注：骨架屏是对已知节点进行查找，如果使用在for循环中，需对数据赋初始值。

Slots

插槽名称	插槽说明
-	-

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

事件名	说明	回调参数
-	-	-

预览

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

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

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