You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
3 years ago | |
|---|---|---|
| .. | ||
| J-skeleton.vue | 3 years ago | |
| README.md | 3 years ago | |
README.md
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 | 是否开启动画 |
使用示例
<skeleton
:loading="loading"
:avatarSize="skeleton1.avatarSize"
:row="skeleton1.row"
:showTitle="skeleton1.showTitle"
>
<view class="section-content">我是段落1</view>
</skeleton>
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)
},
},
}
