parent
0c5aa2ba6a
commit
923e854bd0
@ -0,0 +1,270 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view v-if="loading" class="skeleton" :class="{ animate: animate,margin16:!isClassify }" :style="{ justifyContent: flexType}"> |
||||||
|
<!-- 轮播图 --> |
||||||
|
<view |
||||||
|
v-if="imgTitle" |
||||||
|
class="skeleton-imgTitle" |
||||||
|
style="width: 95%;border-radius: 10px;height: 100px;display: block;" |
||||||
|
></view> |
||||||
|
<!-- 头像图 --> |
||||||
|
<view |
||||||
|
v-if="showAvatar && !imgTitle" |
||||||
|
class="skeleton-avatar" |
||||||
|
v-for="(item, index) in nameRow" |
||||||
|
:key="index" |
||||||
|
:class="[avatarShape]" |
||||||
|
:style="{ width: avatarSize, height: avatarSize}" |
||||||
|
></view> |
||||||
|
<!-- 文字条 --> |
||||||
|
<view class="skeleton-content" v-if="showTitle && !imgTitle"> |
||||||
|
<view class="skeleton-title" :style="{ width: titleWidth }"></view> |
||||||
|
<view class="skeleton-rows"> |
||||||
|
<view |
||||||
|
class="skeleton-row-item" |
||||||
|
v-for="(item, index) in rowList" |
||||||
|
:key="index" |
||||||
|
:style="{ width: item.width }" |
||||||
|
></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view v-if="isClassify" |
||||||
|
class="classify-avatar" |
||||||
|
> |
||||||
|
<view class="top dis-flex"> |
||||||
|
<view class="top-con" v-for="(item,index) in [1,2,3,4,5,6,7,8,9]" :key="index"> |
||||||
|
<view class="img"> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="title"></view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="dis-flex boto"> |
||||||
|
<view class="left"> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="right flex-1 dis-flex"> |
||||||
|
|
||||||
|
<view class="ri-top"> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="dis-flex ri-item"> |
||||||
|
<view class="skeleton-avatar "></view> |
||||||
|
<view class="skeleton-rows"> |
||||||
|
<view |
||||||
|
class="skeleton-row-item" |
||||||
|
v-for="(item, index) in rowList" |
||||||
|
:key="index" |
||||||
|
:style="{ width: item.width }" |
||||||
|
> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view v-else><slot></slot></view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const DEFAULT_ROW_WIDTH = '100%' |
||||||
|
const DEFAULT_LAST_ROW_WIDTH = '80%' |
||||||
|
|
||||||
|
export default { |
||||||
|
props: { |
||||||
|
loading: { |
||||||
|
type: Boolean, |
||||||
|
default: true, |
||||||
|
}, |
||||||
|
isClassify:{ |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
imgTitle: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
nameRow:{ |
||||||
|
type: Number, |
||||||
|
default: 1, |
||||||
|
}, |
||||||
|
flexType:{ |
||||||
|
type: String, |
||||||
|
default: 'flex-start', // center 居中 √ space-between 两端对齐 √ space-around 子元素拉手分布 √ flex-start 居左 flex-end 居右 |
||||||
|
}, |
||||||
|
showAvatar: { |
||||||
|
type: Boolean, |
||||||
|
default: true, |
||||||
|
}, |
||||||
|
avatarSize: { |
||||||
|
type: String, |
||||||
|
default: '50px', |
||||||
|
}, |
||||||
|
avatarShape: { |
||||||
|
type: String, |
||||||
|
default: 'round', // square | round |
||||||
|
}, |
||||||
|
showTitle: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
titleWidth: { |
||||||
|
type: String, |
||||||
|
default: '40%', |
||||||
|
}, |
||||||
|
row: { |
||||||
|
type: Number, |
||||||
|
default: 3, |
||||||
|
}, |
||||||
|
animate: { |
||||||
|
type: Boolean, |
||||||
|
default: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
rowList() { |
||||||
|
let list = [] |
||||||
|
for (let i = 0; i < this.row; i++) { |
||||||
|
list.push({ |
||||||
|
width: i === this.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH, |
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
return list |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
|
||||||
|
.classify-avatar{ |
||||||
|
height: calc(100vh - 60px); |
||||||
|
} |
||||||
|
.boto{ |
||||||
|
height: calc(100% - 150rpx); |
||||||
|
} |
||||||
|
.top{ |
||||||
|
height: 150rpx; |
||||||
|
overflow: hidden; |
||||||
|
.top-con{ |
||||||
|
height: 100%; |
||||||
|
padding: 0 15rpx; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
} |
||||||
|
.img{ |
||||||
|
width: 80rpx; |
||||||
|
height: 80rpx; |
||||||
|
padding: 2rpx; |
||||||
|
margin: 0 0 10rpx; |
||||||
|
background:var(--bg-color); |
||||||
|
border-radius: 50% !important; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
height: 16px; |
||||||
|
width: 80rpx; |
||||||
|
border-radius: 8px; |
||||||
|
background:var(--bg-color) ; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.left{ |
||||||
|
width: 200rpx; |
||||||
|
height: 100%; |
||||||
|
background:var(--bg-color) ; |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 0 20rpx; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
.right{ |
||||||
|
|
||||||
|
padding: 16px; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
.ri-top{ |
||||||
|
|
||||||
|
} |
||||||
|
.ri-item{ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
/* */ |
||||||
|
.skeleton { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
--bg-color: #f2f3f5; |
||||||
|
--row-height: 16px; |
||||||
|
--row-margin-top: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.margin16{ |
||||||
|
margin: 16px 16px 0 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.skeleton-imgTitle { |
||||||
|
flex-wrap: wrap; |
||||||
|
background: var(--bg-color); |
||||||
|
margin: 10px auto; |
||||||
|
|
||||||
|
} |
||||||
|
.skeleton-avatar { |
||||||
|
flex-shrink: 0; |
||||||
|
background: var(--bg-color); |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
.skeleton-avatar.round { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.skeleton-content { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.skeleton-title { |
||||||
|
background-color: var(--bg-color); |
||||||
|
height: var(--row-height); |
||||||
|
} |
||||||
|
|
||||||
|
.skeleton-title + .skeleton-rows { |
||||||
|
margin-top: var(--row-margin-top); |
||||||
|
} |
||||||
|
|
||||||
|
.skeleton-rows { |
||||||
|
} |
||||||
|
|
||||||
|
.skeleton-row-item { |
||||||
|
background-color: var(--bg-color); |
||||||
|
height: var(--row-height); |
||||||
|
} |
||||||
|
.skeleton-row-item:not(:first-child) { |
||||||
|
margin-top: var(--row-margin-top); |
||||||
|
} |
||||||
|
|
||||||
|
.skeleton.animate { |
||||||
|
animation: skeleton-blink 1.2s ease-in-out infinite; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes skeleton-blink { |
||||||
|
0% { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
50% { |
||||||
|
opacity: 0.6; |
||||||
|
} |
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
# skeleton |
||||||
|
感谢原作者 https://ext.dcloud.net.cn/plugin?id=852 |
||||||
|
|
||||||
|
自己项目非常需要骨架，正好原作者发布了1.0 根据自己项目 自己修改了下。 |
||||||
|
|
||||||
|
目前仅支持： |
||||||
|
1.轮播图 |
||||||
|
2.分类栏 |
||||||
|
3.头像 |
||||||
|
4.文章条 |
||||||
|
5.动态心情 |
||||||
|
|
||||||
|
以上是根据自己项目修改的，后续再拓展，或者自己根据自己项目修改，原作者写的还是很灵活的，修改方便！ |
||||||
|
|
||||||
|
|
||||||
|
## 属性说明 |
||||||
|
|
||||||
|
|属性名|类型|默认值|说明| |
||||||
|
| -- | -- | --|--| |
||||||
|
| loading | Boolean | true | 是否显示占位图 | |
||||||
|
| flexType | String | flex-start | 排列方式 center 居中 √ space-between 两端对齐 √ space-around 子元素拉手分布 √ flex-start 居左 flex-end 居右 | |
||||||
|
| imgTitle | Boolean | false | 轮播图占位图 | |
||||||
|
| showAvatar | Boolean | true | 是否显示头像占位图 | |
||||||
|
| nameRow | Number | 1 | 显示头像圆1个 | |
||||||
|
| avatarSize | String | 50px | 头像站占位图大小 | |
||||||
|
| avatarShape | String | round | 头像形状，可选值：round, square | |
||||||
|
| showTitle | Boolean | true | 是否显示标题占位图 | |
||||||
|
| titleWidth | String | 40% | 标题占位图宽度 | |
||||||
|
| row | Number| 3 | 标题段落占位图行数 | |
||||||
|
| animate | Boolean | true | 是否开启动画 | |
||||||
|
|
||||||
|
## 使用示例 |
||||||
|
|
||||||
|
```html |
||||||
|
<skeleton |
||||||
|
:loading="loading" |
||||||
|
:avatarSize="skeleton1.avatarSize" |
||||||
|
:row="skeleton1.row" |
||||||
|
:showTitle="skeleton1.showTitle" |
||||||
|
> |
||||||
|
<view class="section-content">我是段落1</view> |
||||||
|
</skeleton> |
||||||
|
``` |
||||||
|
|
||||||
|
```javascript |
||||||
|
import Skeleton from '../components/skeleton/index.vue' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
Skeleton |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: true, |
||||||
|
skeleton1 : { |
||||||
|
avatarSize: '52px', |
||||||
|
row: 3, |
||||||
|
showTitle: true, |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.reloadData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
reloadData() { |
||||||
|
this.loading = true |
||||||
|
setTimeout(() => { |
||||||
|
this.loading = false |
||||||
|
}, 3000) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
## 效果图 |
||||||
|
|
||||||
|
 |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue