# skeletons

**Repository Path**: minchangyong/skeletons

## Basic Information

- **Project Name**: skeletons
- **Description**: 小程序骨架屏实现方案
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 15
- **Forks**: 5
- **Created**: 2019-09-28
- **Last Updated**: 2025-08-28

## Categories & Tags

**Categories**: weixin-lapp

**Tags**: None

## README

# skeletons

#### 介绍
小程序骨架屏实现方案, 比较建议长列表使用骨架屏。


#### 快速上手

##### 引入骨架屏组件index.json

* 微信端

```
{
  "usingComponents": {
    "skeletons": "/component/wx-skeletons/index"
  }
}
```
* 支付宝端

```
{
  "usingComponents": {
    "skeletons": "/component/ali-skeletons/index"
  }
}
```
* 在对应的 wxml&axml文件内添加

```
<skeletons isNodes="{{isNodes}}" isComplete="{{isComplete}}" />
```
* JS中操作：

```
  initData() {
    let postData = {
        townId: util.getStorageSync('townId') || 87
    }
    // 初始化请求第一个接口
    app.postAjax('https://url.com', postData).then((res) => {
      if (res.success) {
        this.setData({
          bodyData: res.data,  //页面展示数据的大对象
          isNodes: true //抓取节点绘制骨架屏
        }, () => {
          this.setData({
            isComplete: true  //节点绘制完成，隐藏骨架屏
          })
        })
      } else {
        util.toast(res.msg || '团团开小差啦，请稍后重试')
      }
    }, () => {
      util.toast('团团开小差啦，请稍后重试')
    })
  },
```

* util.js

```
//wx
function toast(msg) {
  wx.showToast({
      title: msg,
      icon: 'none'
  })
}
//ali
function toast(msg) {
  my.showToast({
      content: msg
  })
}
```

#### 属性

![属性](https://images.gitee.com/uploads/images/2019/0928/110655_4ef6d5a1_744578.png "屏幕截图.png")



#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request


#### 码云特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)