# 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示例小程序码