{"id":21713916,"url":"https://github.com/cytle/ma-skeleton","last_synced_at":"2025-07-25T12:34:43.827Z","repository":{"id":51986751,"uuid":"158998386","full_name":"cytle/ma-skeleton","owner":"cytle","description":"小程序骨架屏，利用SelectorQuery自动生成骨架屏","archived":false,"fork":false,"pushed_at":"2021-05-08T13:21:58.000Z","size":507,"stargazers_count":54,"open_issues_count":5,"forks_count":21,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T11:46:41.381Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cytle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-25T04:42:30.000Z","updated_at":"2024-11-28T03:52:44.000Z","dependencies_parsed_at":"2022-08-27T02:29:13.031Z","dependency_job_id":null,"html_url":"https://github.com/cytle/ma-skeleton","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cytle/ma-skeleton","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cytle%2Fma-skeleton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cytle%2Fma-skeleton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cytle%2Fma-skeleton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cytle%2Fma-skeleton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cytle","download_url":"https://codeload.github.com/cytle/ma-skeleton/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cytle%2Fma-skeleton/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267007521,"owners_count":24020258,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-26T00:28:45.341Z","updated_at":"2025-07-25T12:34:43.797Z","avatar_url":"https://github.com/cytle.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# ma-skeleton\n\n小程序骨架屏\n\n## Usage\n\n### 1. 拷贝组件\n\n将此项目中 `/demo/components/skeleton`文件夹拷贝到你的项目中\n\n### 2. 引入组件到页面\n\nindex.json\n\n``` json\n{\n  \"usingComponents\": {\n    \"skeleton\": \"../../components/skeleton/skeleton\"\n  }\n}\n```\n\nindex.wxml\n\n``` xml\n\u003c!-- 引入组件 --\u003e\n\u003cskeleton loading=\"spin\" bgcolor=\"#FFF\" selector=\"skeleton\" isDev=\"true\"\u003e\u003c/skeleton\u003e\n```\n\n### 3. 添加标识\n\nindex.wxml\n\n``` xml\n\u003c!-- 引入组件 --\u003e\n\u003cskeleton loading=\"spin\" bgcolor=\"#FFF\" selector=\"skeleton\" isDev=\"true\"\u003e\u003c/skeleton\u003e\n\n\u003c!-- 标识 skeleton --\u003e\n\u003cview class=\"page skeleton\"\u003e\n  \u003c!-- 矩形元素标识 skeleton-rect --\u003e\n  \u003cview class=\"search-bar skeleton-rect\"\u003e\n    Hello, Search\n  \u003c/view\u003e\n  \u003cview class=\"userinfo\"\u003e\n    \u003c!-- 圆形元素标识 skeleton-circle --\u003e\n    \u003cview class=\"userinfo__avatar skeleton-circle\"\u003e\n      \u003copen-data type=\"userAvatarUrl\"\u003e\u003c/open-data\u003e\n    \u003c/view\u003e\n    \u003cview class=\"userinfo__nickname skeleton-rect\"\u003e\n      \u003copen-data type=\"userNickName\"\u003e\u003c/open-data\u003e\n    \u003c/view\u003e\n  \u003c/view\u003e\n\u003c/view\u003e\n```\n\n### 4. 生成骨架屏数据\n\n点击右下角按钮会预览骨架屏，同时在控制台会生成骨架屏数据，这时候想办法保存数据，然后再引入数据，这样就可以得到骨架屏了\n\n![生成骨架屏数据](https://github.com/cytle/ma-skeleton/raw/5664f612a64a02b06ef36f8e71ba7449b0e33128/media/create-data.png)\n\n## 骨架支持的元素\n\n支持的元素类型\n\n| type | selector name | desc |\n|------|---------------|------|\n| bg   | .${selector}-bg | 圆角矩形淡色样式 |\n| rect | .${selector}-rect | 圆角矩形样式 |\n| circle | .${selector}-circle | 圆形样式 |\n\n## 组件支持的属性\n\n``` js\n// properties\n{\n  /**\n   * 骨架屏数据\n   */\n  data: {\n    type: Object,\n    value: null,\n  },\n  /**\n   * 是否是开发模式，如果为true, 则显示生成按钮\n   */\n  isDev: {\n    type: Boolean,\n    value: false,\n  },\n  /**\n   * 选择器名字\n   */\n  selector: {\n    type: String,\n    value: 'skeleton',\n  },\n  /**\n   * 骨架屏背景\n   */\n  bgcolor: {\n    type: String,\n    value: '#FFF',\n  },\n  /**\n   * 骨架屏动画效果，可以是如下值: 'spin', 'chiaroscuro', 'shine'\n   */\n  loading: {\n    type: String,\n    value: '',\n  },\n},\n```\n\n## demo\n\n![demo](https://github.com/cytle/ma-skeleton/raw/5664f612a64a02b06ef36f8e71ba7449b0e33128/media/demo.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcytle%2Fma-skeleton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcytle%2Fma-skeleton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcytle%2Fma-skeleton/lists"}