https://github.com/cytle/ma-skeleton
小程序骨架屏，利用SelectorQuery自动生成骨架屏
https://github.com/cytle/ma-skeleton
Last synced: 2 months ago
JSON representation
小程序骨架屏，利用SelectorQuery自动生成骨架屏
- Host: GitHub
- URL: https://github.com/cytle/ma-skeleton
- Owner: cytle
- Created: 2018-11-25T04:42:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-08T13:21:58.000Z (about 4 years ago)
- Last Synced: 2025-01-25T17:28:12.656Z (4 months ago)
- Homepage:
- Size: 495 KB
- Stars: 54
- Watchers: 3
- Forks: 21
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ma-skeleton
小程序骨架屏
## Usage
### 1. 拷贝组件
将此项目中 `/demo/components/skeleton`文件夹拷贝到你的项目中
### 2. 引入组件到页面
index.json
``` json
{
"usingComponents": {
"skeleton": "../../components/skeleton/skeleton"
}
}
```
index.wxml
``` xml
```
### 3. 添加标识
index.wxml
``` xml
Hello, Search
```
### 4. 生成骨架屏数据
点击右下角按钮会预览骨架屏，同时在控制台会生成骨架屏数据，这时候想办法保存数据，然后再引入数据，这样就可以得到骨架屏了
## 骨架支持的元素
支持的元素类型
| type | selector name | desc |
|------|---------------|------|
| bg | .${selector}-bg | 圆角矩形淡色样式 |
| rect | .${selector}-rect | 圆角矩形样式 |
| circle | .${selector}-circle | 圆形样式 |
## 组件支持的属性
``` js
// properties
{
/**
* 骨架屏数据
*/
data: {
type: Object,
value: null,
},
/**
* 是否是开发模式，如果为true, 则显示生成按钮
*/
isDev: {
type: Boolean,
value: false,
},
/**
* 选择器名字
*/
selector: {
type: String,
value: 'skeleton',
},
/**
* 骨架屏背景
*/
bgcolor: {
type: String,
value: '#FFF',
},
/**
* 骨架屏动画效果，可以是如下值: 'spin', 'chiaroscuro', 'shine'
*/
loading: {
type: String,
value: '',
},
},
```
## demo
