Skip to content

Commit 7260412

Browse files
7insummer7insummer
authored
feat:新增skeleton组件 (#673)
* feat:新增skeleton组件
1 parent fbfea47 commit 7260412

File tree

26 files changed

+672
-11
lines changed

26 files changed

+672
-11
lines changed

‎dist/card/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<view class="l-class card-container {{'card-container-' + type}} {{'card-container-' + type + '-' + position}} {{full?'card-container-full':'card-container-unfull'}}">
22
<block wx:if="{{type ==='primary' || type ==='cover'}}">
3-
<image wx:if="{{!plaintext}}" class="l-img-class {{full?'cover-img-full':'cover-img-unfull'}} {{ 'card-img-' + type }} {{ 'card-img-' + type + '-' + position }}" mode="aspectFill" lazy-load="{{true}}" src="{{image}}"></image>
3+
<image wx:if="{{!plaintext}}" class="l-img-class {{full?'cover-img-full':'cover-img-unfull'}} {{ 'card-img-' + type }} {{ 'card-img-' + type + '-' + position }}" mode="{{imageMode}}" lazy-load="{{true}}" src="{{image}}"></image>
44
<view class="card-content">
55
<text class="l-title-class card-title {{'card-title-' + type}}">{{title}}</text>
66
<slot />

‎dist/popup/index.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,7 @@ Component({
7171
});
7272
setTimeout(()=>{
7373
this.setData({
74-
show: false,
75-
status: 'show'
74+
show: false
7675
});
7776
},300);
7877
};

‎dist/skeleton/index.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
Component({
2+
/**
3+
* 组件的属性列表
4+
*/
5+
externalClasses: [
6+
'l-class',
7+
'l-title-class',
8+
'l-avatar-class',
9+
'l-row-class'
10+
],
11+
properties: {
12+
loading: {
13+
type: Boolean,
14+
value: true
15+
},
16+
title: {
17+
type: Boolean,
18+
value: true
19+
},
20+
paragraph: {
21+
type: Boolean,
22+
value: true
23+
},
24+
active: {
25+
type: Boolean,
26+
value: true
27+
},
28+
avatar: Boolean,
29+
titleWidth: String,
30+
avatarSize: String,
31+
avatarShape: {
32+
type: String,
33+
value: 'circle'
34+
},
35+
rowsWidth: {
36+
type: Array,
37+
optionalTypes: [Array, String],
38+
value: '60%'
39+
},
40+
rowsHeight: {
41+
type: Array,
42+
optionalTypes: [Array, String],
43+
value: '34rpx'
44+
},
45+
rows: Number
46+
},
47+
48+
observers: {
49+
'rows,rowsWidth,rowsHeight': function(rows, rowsWidth, rowsHeight) {
50+
this._getResult(rows, rowsWidth, 'rowsW', '100%');
51+
this._getResult(rows, rowsHeight, 'rowsH', '34rpx');
52+
this._toRows(rows);
53+
}
54+
},
55+
56+
/**
57+
* 组件的初始数据
58+
*/
59+
data: {
60+
61+
},
62+
63+
/**
64+
* 组件的方法列表
65+
*/
66+
methods: {
67+
_arrRepeat(target, n) {
68+
const r = [];
69+
for (let i = 0; i < n-1; i++) {
70+
r.push(target);
71+
}
72+
return r;
73+
},
74+
_getResult(rows, rowsPro, key, target) {
75+
if (Array.isArray(rowsPro)) {
76+
this.data[key] = rowsPro;
77+
} else {
78+
const r = this._arrRepeat(target, rows);
79+
r.push(rowsPro);
80+
this.data[key] = r;
81+
}
82+
},
83+
_toRows(rows) {
84+
let r = [];
85+
for (let i = 0; i < rows; i++) {
86+
r.push({
87+
width: this.data.rowsW[i],
88+
height: this.data.rowsH[i]
89+
});
90+
}
91+
this.setData({
92+
r
93+
});
94+
}
95+
}
96+
});

‎dist/skeleton/index.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"component": true,
3+
"usingComponents": {}
4+
}

‎dist/skeleton/index.wxml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<view wx:if="{{loading}}" class="l-skeleton-container l-class">
2+
3+
<view wx:if="{{avatar}}"
4+
class="l-avatar-class l-skeleton-avatar bg {{active?'active':''}} l-skeleton-avatar-{{avatarShape}}"
5+
style="width:{{avatarSize}};height:{{avatarSize}}"></view>
6+
7+
<view class="l-skeleton-right">
8+
<view wx:if="{{title}}"
9+
class="l-skeleton-title-container"
10+
style="height:{{avatarSize}}">
11+
<view class="l-skeleton-title bg {{active?'active':''}}"
12+
style="height:{{titleHeight}}"></view>
13+
</view>
14+
15+
<view wx:if="{{paragraph}}"
16+
wx:for="{{r}}"
17+
wx:key="{{index}}"
18+
class="l-row-class l-skeleton-rows bg {{active?'active':''}}"
19+
style="height:{{item.height}};width:{{item.width}}"
20+
></view>
21+
</view>
22+
23+
</view>
24+
25+
<slot wx:else/>

‎dist/skeleton/index.wxss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.l-skeleton-container{width:100%;display:flex;flex-direction:row;box-sizing:border-box}.l-skeleton-avatar{height:72rpx;width:72rpx;margin-right:20rpx}.l-skeleton-avatar-circle{border-radius:50%}.l-skeleton-right{display:flex;flex-direction:column;flex:1}.l-skeleton-title{width:100%;height:34rpx}.l-skeleton-title-container{height:72rpx;width:50%;display:flex;align-items:center}.l-skeleton-rows{margin-top:20rpx}.bg{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%}.active{animation:loading 1.4s ease infinite}@keyframes loading{0%{background-position:100% 50%}100%{background-position:0 50%}}

‎examples/app.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@
6464
"pages/status-show/show/show",
6565
"pages/loadmore/index",
6666
"pages/loadmore/case/index",
67-
"pages/steps/index"
67+
"pages/steps/index",
68+
"pages/skeleton/index"
6869
]
6970
},
7071
{

‎examples/dist/card/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<view class="l-class card-container {{'card-container-' + type}} {{'card-container-' + type + '-' + position}} {{full?'card-container-full':'card-container-unfull'}}">
22
<block wx:if="{{type ==='primary' || type ==='cover'}}">
3-
<image wx:if="{{!plaintext}}" class="l-img-class {{full?'cover-img-full':'cover-img-unfull'}} {{ 'card-img-' + type }} {{ 'card-img-' + type + '-' + position }}" mode="aspectFill" lazy-load="{{true}}" src="{{image}}"></image>
3+
<image wx:if="{{!plaintext}}" class="l-img-class {{full?'cover-img-full':'cover-img-unfull'}} {{ 'card-img-' + type }} {{ 'card-img-' + type + '-' + position }}" mode="{{imageMode}}" lazy-load="{{true}}" src="{{image}}"></image>
44
<view class="card-content">
55
<text class="l-title-class card-title {{'card-title-' + type}}">{{title}}</text>
66
<slot />

‎examples/dist/popup/index.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,7 @@ Component({
7171
});
7272
setTimeout(()=>{
7373
this.setData({
74-
show: false,
75-
status: 'show'
74+
show: false
7675
});
7776
},300);
7877
};

‎examples/dist/skeleton/index.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
Component({
2+
/**
3+
* 组件的属性列表
4+
*/
5+
externalClasses: [
6+
'l-class',
7+
'l-title-class',
8+
'l-avatar-class',
9+
'l-row-class'
10+
],
11+
properties: {
12+
loading: {
13+
type: Boolean,
14+
value: true
15+
},
16+
title: {
17+
type: Boolean,
18+
value: true
19+
},
20+
paragraph: {
21+
type: Boolean,
22+
value: true
23+
},
24+
active: {
25+
type: Boolean,
26+
value: true
27+
},
28+
avatar: Boolean,
29+
titleWidth: String,
30+
avatarSize: String,
31+
avatarShape: {
32+
type: String,
33+
value: 'circle'
34+
},
35+
rowsWidth: {
36+
type: Array,
37+
optionalTypes: [Array, String],
38+
value: '60%'
39+
},
40+
rowsHeight: {
41+
type: Array,
42+
optionalTypes: [Array, String],
43+
value: '34rpx'
44+
},
45+
rows: Number
46+
},
47+
48+
observers: {
49+
'rows,rowsWidth,rowsHeight': function(rows, rowsWidth, rowsHeight) {
50+
this._getResult(rows, rowsWidth, 'rowsW', '100%');
51+
this._getResult(rows, rowsHeight, 'rowsH', '34rpx');
52+
this._toRows(rows);
53+
}
54+
},
55+
56+
/**
57+
* 组件的初始数据
58+
*/
59+
data: {
60+
61+
},
62+
63+
/**
64+
* 组件的方法列表
65+
*/
66+
methods: {
67+
_arrRepeat(target, n) {
68+
const r = [];
69+
for (let i = 0; i < n-1; i++) {
70+
r.push(target);
71+
}
72+
return r;
73+
},
74+
_getResult(rows, rowsPro, key, target) {
75+
if (Array.isArray(rowsPro)) {
76+
this.data[key] = rowsPro;
77+
} else {
78+
const r = this._arrRepeat(target, rows);
79+
r.push(rowsPro);
80+
this.data[key] = r;
81+
}
82+
},
83+
_toRows(rows) {
84+
let r = [];
85+
for (let i = 0; i < rows; i++) {
86+
r.push({
87+
width: this.data.rowsW[i],
88+
height: this.data.rowsH[i]
89+
});
90+
}
91+
this.setData({
92+
r
93+
});
94+
}
95+
}
96+
});

0 commit comments

Comments
 (0)