# 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)
},
},
}
```
## 效果图
![](http://images.alisali.cn/img_20191014113211.png)
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
基于uniapp开发的一套仿喜茶GO小程序的前端模板 (179个子文件)
.DS_Store 6KB
.gitignore 10B
categories.js 168KB
giftCards.js 112KB
memberMall.js 66KB
uqrcode.js 30KB
orders.js 26KB
MpHtmlParser.js 17KB
productList.js 13KB
martDetail.js 7KB
mart.js 6KB
orderDetail.js 5KB
hotSearch.js 3KB
config.js 3KB
boardcast.js 3KB
CssHandler.js 3KB
util.js 3KB
icons.js 2KB
scores.js 2KB
productDetail.js 1KB
index.js 937B
index.js 930B
notices.js 534B
historySearch.js 401B
popup.js 387B
message.js 356B
main.js 328B
storeOrders.js 17B
addresses.js 0B
pages.json 4KB
manifest.json 3KB
LICENSE 11KB
README.md 2KB
me_pointmall_img_nogift.png 30KB
me_img_banner_mall.png 25KB
nocoupon.png 17KB
img_pointmall_star.png 12KB
coupons-empty.png 10KB
img_giftcard_empty.png 8KB
me_icon_points.png 7KB
me_icon_quan.png 7KB
icon_map.png 6KB
weixin-pay.png 6KB
b3d3a98e3c7f450aaa32fbec6aecdfaf.png 6KB
icon_phone.png 6KB
b3d3a98e3c7f450aaa32fbec6aecdfaf.png 5KB
me_icon_wallet.png 4KB
default_img_order.png 4KB
me_icon_gift_card.png 4KB
home_icon_waimai1.png 3KB
gouxuankuang.png 3KB
me_icon_notification.png 3KB
me_club_task_img_done.png 2KB
round_close_btn.png 2KB
star_normal.png 2KB
home_icon_ziqu1.png 2KB
logo.png 2KB
logo.png 2KB
icon_giftcard.png 2KB
me_rights_icon_qingshi_dis.png 2KB
icon_black_back.png 1KB
menupopup_btn_share_quanzi.png 1KB
order_cancelpay.png 1KB
home_icon_qiye1.png 1KB
search-icon.png 1KB
round-black-selected.png 1KB
index.png 1KB
my.png 1KB
edit.png 1KB
menupopup_btn_share_wechat.png 1KB
menupopup_btn_share_normal.png 1KB
me_rights_icon_qingshi.png 1KB
delete.png 1KB
icon_about.png 1KB
index_selected.png 1KB
my_selected.png 1KB
mart_selected.png 1KB
home.png 1KB
me_rights_icon_free_dis.png 1KB
mart.png 1020B
me_rights_icon_waimai_new.png 1012B
home_icon_baihuo1.png 983B
order_icon_talk2.0.png 943B
icon_shopping_bag.png 930B
icon_attention.png 918B
order_selected.png 905B
me_rights_icon_free.png 881B
icon_making.png 877B
order.png 871B
round_minus.png 860B
store_brh_service_normal.png 807B
closex.png 801B
me_rights_icon_2jia1.png 798B
home_selected.png 794B
me_rights_icon_youxian_new.png 787B
me_rights_icon_2jia1_dis.png 755B
order_icon_address.png 736B
order_icon_service.png 730B
me_rights_icon_waimai_new_dis.png 715B
scan-qrcode.png 704B
共 179 条
- 1
- 2
资源评论
- TNYL2022-05-04用户下载后在一定时间内未进行评价,系统默认好评。
爱吃苹果的Jemmy
- 粉丝: 75
- 资源: 1148
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功