Files
danyang-match/miniapp/components/loading/index.js
T

37 lines
1.0 KiB
JavaScript

/**
* Loading 加载(规范 §21 推荐列表加载状态)
*
* 两种形态:
* - mode="spinner":圆形旋转(页面级首次加载)
* - mode="skeleton":骨架屏(列表渐进加载,避免抖动)
* 用法:
* <ui-loading mode="spinner" text="正在为你挑选…" />
* <ui-loading mode="skeleton" rows="3" />
*/
Component({
options: { addGlobalClass: true },
properties: {
mode: { type: String, value: 'spinner' }, // spinner|skeleton
text: { type: String, value: '' },
rows: { type: Number, value: 3 }, // skeleton 模式行数
inline: { type: Boolean, value: false }, // 是否行内显示
},
data: {
rowList: [],
},
observers: {
rows(n) {
const arr = [];
for (let i = 0; i < n; i++) arr.push(i);
this.setData({ rowList: arr });
},
},
lifetimes: {
attached() {
const arr = [];
for (let i = 0; i < this.data.rows; i++) arr.push(i);
this.setData({ rowList: arr });
},
},
});