1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| <template>
| <cl-page :padding="20">
| <cl-card label="基础用法">
| <view class="count">
| <view class="item" v-for="(item, index) in list" :key="index">
| <cl-skeleton
| :height="120"
| :width="120"
| :radius="120"
| :margin="[0, 0, 20, 0]"
| :loading="!item.avatar"
| >
| <cl-image
| :radius="120"
| :src="item.avatar"
| background-color="#fff"
| v-if="item.avatar"
| />
| </cl-skeleton>
|
| <cl-skeleton
| :custom-style="{
| height: '28rpx',
| width: '90rpx',
| borderRadius: '6rpx',
| }"
| :loading="!item.name"
| >
| <cl-text :size="24" align="center" block>{{ item.name }}</cl-text>
| </cl-skeleton>
| </view>
| </view>
| </cl-card>
|
| <cl-card label="基础用法2">
| <cl-banner :list="list" type="card" :height="300">
| <template #item="{ item }">
| <cl-skeleton :radius="20" height="100%" :loading="!item.bg">
| <image class="cl-banner-item__image" :src="item.bg" mode="aspectFill" />
| </cl-skeleton>
| </template>
| </cl-banner>
| </cl-card>
| </cl-page>
| </template>
|
| <script lang="ts" setup>
| import { onReady } from "@dcloudio/uni-app";
| import { uniqueId } from "lodash-es";
| import { ref } from "vue";
|
| const list = ref<any[]>([{}, {}, {}, {}]);
|
| function get() {
| setTimeout(() => {
| list.value = list.value.map((_, i) => {
| return {
| id: uniqueId(),
| avatar: `/pages/demo/static/avatar${i + 1}.png`,
| bg: `/pages/demo/static/bg${i + 1}.png`,
| name: ["小青", "小白", "小黑", "笑死"][i],
| };
| });
| }, 1500);
| }
|
| onReady(() => {
| get();
| });
| </script>
|
| <style lang="scss" scoped>
| .count {
| display: flex;
| padding: 20rpx 0;
|
| .item {
| flex: 1;
| display: flex;
| flex-direction: column;
| align-items: center;
| justify-content: center;
| height: 200rpx;
| }
| }
| </style>
|
|
