<template>
<u-skeleton
rows="2"
:loading="loading"
avatar
:title="false"
>
<u--text>loading为false时,将会展示此处插槽内容</u--text>
</u-skeleton>
</template>
<script>
export default {
data() {
return {
loading: true
}
},
onLoad() {
// 延时2秒钟
uni.$u.sleep(2000).then(() => {
this.loading = false
})
}
}
</script>
这是官方的使用案例
<template>
<view>
<u-skeleton
class="screen"
rows="4"
title
:loading="load"
>
<view class="">
需要执行的数据代码
</view>
</u-skeleton>
</view>
</template>
<script>
export default {
data() {
return {
listarr:[],
load:true
};
},
onLoad() {
uni.$u.sleep(2000).then(() => {
this.load = false
})
},
methods:{
}
}
</script>
<style lang="scss">
.screen{
padding: 40rpx 30rpx 0;
}
</style>
这是我使用的例子