Skip to content

Commit af764e4

Browse files
juzi214032juzi214032
committed
build: Travis CI automatic compilation
1 parent 2a53a6a commit af764e4

File tree

8 files changed

+161
-0
lines changed

8 files changed

+161
-0
lines changed

‎dist/circle/index.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/circle/index.json‎

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

‎dist/circle/index.wxml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<view class="sector {{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ? 'sector1' : 'sector2'}}" style="height:{{outerDiameter}}rpx;width:{{outerDiameter}}rpx;{{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ?activeColor?'background:'+activeColor:'':'background:'+backgroundColor}}">
2+
<view wx:if="{{displayPercent !== 0 && displayPercent !== 100}}" class="sx1" style="height:{{outerDiameter}}rpx;width:{{outerDiameter}}rpx;clip: rect(0rpx, {{outerDiameter/2}}rpx, {{outerDiameter}}rpx, 0rpx);background:{{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ?backgroundColor:activeColor?activeColor:''}}"></view>
3+
<view wx:if="{{displayPercent !== 50 && displayPercent !== 0 && displayPercent !== 100}}" class="sx2" style="transform: rotate({{displayPercent < 50 ? ((360 * displayPercent / 100) - 180):(360 * (displayPercent - 100) / 100)}}deg);height:{{outerDiameter}}rpx;width:{{outerDiameter}}rpx;clip: rect(0rpx, {{outerDiameter/2}}rpx, {{outerDiameter}}rpx, 0rpx);background:{{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ?backgroundColor:activeColor}}"></view>
4+
<view class="sx_t" style="width:{{innerDiameter}}rpx;height:{{innerDiameter}}rpx;background:{{innerColor}}">
5+
<view wx:if="{{showValue}}" class="l-value-class" style="color:{{valueColor?valueColor:''}};font-size:{{valueSize}}rpx">
6+
{{displayPercent}}%
7+
</view>
8+
<slot></slot>
9+
</view>
10+
</view>

‎dist/circle/index.wxss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.sector{position:relative;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center}.sx1,.sx2{position:absolute;top:0;left:0}.sx1{z-index:1}.sx2{z-index:2}.sx_t{border-radius:50%;z-index:3;display:flex;flex-direction:row;justify-content:center;align-items:center}.sector1{background:#3963bc}.sector2 .sx1,.sector2 .sx2{background:#3963bc;transform:rotate(180deg)}

‎examples/dist/circle/index.js‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
// miniprogram_npm/lin-ui/circle/index.js
2+
Component({
3+
/**
4+
* 组件的属性列表
5+
*/
6+
externalClasses: ['l-value-class'],
7+
properties: {
8+
percent: {
9+
type: Number,
10+
value: 0
11+
},
12+
outerDiameter: {
13+
type: Number,
14+
value: 220
15+
},
16+
innerDiameter: {
17+
type: Number,
18+
value: 170
19+
},
20+
activeColor: {
21+
type: String
22+
},
23+
backgroundColor: {
24+
type: String,
25+
value: '#EBEBEB',
26+
},
27+
innerColor: {
28+
type: String,
29+
value: '#FFFFFF',
30+
},
31+
active: {
32+
type: Boolean,
33+
value: false
34+
},
35+
duration: {
36+
type: Number,
37+
value: 30
38+
},
39+
showValue: {
40+
type: Boolean,
41+
value: false
42+
},
43+
valueColor: {
44+
type: String,
45+
},
46+
valueSize: {
47+
type: Number,
48+
value: 25
49+
}
50+
},
51+
52+
options: {
53+
multipleSlots: true,
54+
pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
55+
},
56+
57+
/**
58+
* 组件的初始数据
59+
*/
60+
data: {
61+
displayPercent: 0,
62+
},
63+
64+
observers: {
65+
'percent': async function (percent) {
66+
if (percent > 100) {
67+
this.setData({
68+
percent: 100
69+
});
70+
return;
71+
}
72+
if (percent < 0) {
73+
this.setData({
74+
percent: 0
75+
});
76+
return;
77+
}
78+
if (this.data.active) {
79+
let displayPercent = this.data.displayPercent;
80+
81+
if (displayPercent < percent) {
82+
while (displayPercent < percent) {
83+
await this.sleep(this.data.duration);
84+
displayPercent += 1;
85+
this.setData({
86+
displayPercent: displayPercent
87+
});
88+
}
89+
} else if (displayPercent > percent) {
90+
while (displayPercent > percent) {
91+
await this.sleep(this.data.duration);
92+
displayPercent -= 1;
93+
this.setData({
94+
displayPercent
95+
});
96+
}
97+
}
98+
} else {
99+
this.setData({
100+
displayPercent: percent
101+
});
102+
}
103+
},
104+
105+
'outerDiameter': function (outerDiameter) {
106+
if (outerDiameter < this.data.innerDiameter) {
107+
outerDiameter = this.data.innerDiameter;
108+
this.setData({
109+
outerDiameter
110+
});
111+
}
112+
},
113+
114+
'innerDiameter': function (innerDiameter) {
115+
if (innerDiameter < 0) {
116+
this.setData({
117+
innerDiameter: 0
118+
});
119+
}
120+
}
121+
},
122+
123+
/**
124+
* 组件的方法列表
125+
*/
126+
methods: {
127+
sleep(milSec) {
128+
return new Promise(resolve => {
129+
setTimeout(resolve, milSec);
130+
});
131+
}
132+
}
133+
});

‎examples/dist/circle/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+
}

‎examples/dist/circle/index.wxml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<view class="sector {{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ? 'sector1' : 'sector2'}}" style="height:{{outerDiameter}}rpx;width:{{outerDiameter}}rpx;{{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ?activeColor?'background:'+activeColor:'':'background:'+backgroundColor}}">
2+
<view wx:if="{{displayPercent !== 0 && displayPercent !== 100}}" class="sx1" style="height:{{outerDiameter}}rpx;width:{{outerDiameter}}rpx;clip: rect(0rpx, {{outerDiameter/2}}rpx, {{outerDiameter}}rpx, 0rpx);background:{{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ?backgroundColor:activeColor?activeColor:''}}"></view>
3+
<view wx:if="{{displayPercent !== 50 && displayPercent !== 0 && displayPercent !== 100}}" class="sx2" style="transform: rotate({{displayPercent < 50 ? ((360 * displayPercent / 100) - 180):(360 * (displayPercent - 100) / 100)}}deg);height:{{outerDiameter}}rpx;width:{{outerDiameter}}rpx;clip: rect(0rpx, {{outerDiameter/2}}rpx, {{outerDiameter}}rpx, 0rpx);background:{{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ?backgroundColor:activeColor}}"></view>
4+
<view class="sx_t" style="width:{{innerDiameter}}rpx;height:{{innerDiameter}}rpx;background:{{innerColor}}">
5+
<view wx:if="{{showValue}}" class="l-value-class" style="color:{{valueColor?valueColor:''}};font-size:{{valueSize}}rpx">
6+
{{displayPercent}}%
7+
</view>
8+
<slot></slot>
9+
</view>
10+
</view>

‎examples/dist/circle/index.wxss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.sector{position:relative;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center}.sx1,.sx2{position:absolute;top:0;left:0}.sx1{z-index:1}.sx2{z-index:2}.sx_t{border-radius:50%;z-index:3;display:flex;flex-direction:row;justify-content:center;align-items:center}.sector1{background:#3963bc}.sector2 .sx1,.sector2 .sx2{background:#3963bc;transform:rotate(180deg)}

0 commit comments

Comments
 (0)