群晖ds1817做网站,给你一个网站怎么做的吗,品牌策划的七个步骤,广州有哪些区有几个区骨架屏一般用于页面在请求远程数据尚未完成时#xff0c;页面用灰色块预显示本来的页面结构#xff0c;给用户更好的体验。
说明
由于VUE和NVUE的特性不同#xff0c;组件动画在VUE上为由左到右形式#xff0c;在NVUE上为明暗显隐的形式。
#平台差异说明
App#xff0…骨架屏一般用于页面在请求远程数据尚未完成时页面用灰色块预显示本来的页面结构给用户更好的体验。
说明
由于VUE和NVUE的特性不同组件动画在VUE上为由左到右形式在NVUE上为明暗显隐的形式。
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
组件由标题段落和头像组件组件其中段落需要通过rows参数配置才显示可以通过title和avatar是否显示标题和头像 。 该组件的使用有几个需要注意的点如下
title(可选)是否显示标题占位行该占位行不布满全屏宽度同时与段落的距离较大以做明显区分avatar(可选)是否在左上角位置显示圆形的头像占位区域rows(可选)段落的行数loading(必选)是否加载中状态如果为true则显示骨架屏组件占位否则显示插槽中的内容
数据请求完成后将loading设置为false会隐藏骨架组件
templateu-skeletonrows3titleloading/u-skeleton
/templatecopy
#加载中动画
设置animate为true加载中的骨架块将会有一个动画效果用以加强视觉效果。
u-skeleton :loadingtrue :animatetrue/u-skeletoncopy
#显示头像
u-skeleton :loadingtrue avatar rows1/u-skeletoncopy
#插槽内容
可以通过插槽写入展示的内容当请求结束将loading设置为false此时会隐藏骨架组件同时展示插槽内容。
templateu-skeletonrows2:loadingloadingavatar:titlefalseu--textloading为false时将会展示此处插槽内容/u--text/u-skeleton
/templatescriptexport default {data() {return {loading: true}},onLoad() {// 延时2秒钟uni.$u.sleep(2000).then(() {this.loading false})}}
/script
