Skip to content

Commit 2a53a6a

Browse files
hongchen.zhangjuzi214032
hongchen.zhang
authored and
juzi214032
committed
feat(Circle): 新增 Circle 组件
1 parent 6279656 commit 2a53a6a

File tree

16 files changed

+478
-2
lines changed

16 files changed

+478
-2
lines changed

‎commitlint.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ module.exports = {
6868
'SearchBar',
6969
'IndexList',
7070
'Behavior',
71-
'CapsuleBar'
71+
'CapsuleBar',
72+
'Circle'
7273
]
7374
]
7475
}

‎examples/app.json‎

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

‎examples/images/component/circle.png‎

1.61 KB
Loading

‎examples/pages/components/view/pages/circle/index.js‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
// pages/components/view/pages/circle/index.js
2+
Page({
3+
4+
/**
5+
* 页面的初始数据
6+
*/
7+
data: {
8+
percent: 60,
9+
openActive: true,
10+
activeColor: 'green',
11+
backgroundColor: '#7FFFAA',
12+
innerColor: '#E1FFFF',
13+
valueColor: 'black',
14+
outerDiameter: 220,
15+
innerDiameter: 170,
16+
backgroundImage: 'timg1.jpeg',
17+
duration: 50,
18+
},
19+
20+
/**
21+
* 生命周期函数--监听页面加载
22+
*/
23+
onLoad: function () {
24+
25+
},
26+
27+
/**
28+
* 生命周期函数--监听页面初次渲染完成
29+
*/
30+
onReady: function () {
31+
32+
},
33+
34+
/**
35+
* 生命周期函数--监听页面显示
36+
*/
37+
onShow: function () {
38+
39+
},
40+
41+
/**
42+
* 生命周期函数--监听页面隐藏
43+
*/
44+
onHide: function () {
45+
46+
},
47+
48+
/**
49+
* 生命周期函数--监听页面卸载
50+
*/
51+
onUnload: function () {
52+
53+
},
54+
55+
/**
56+
* 页面相关事件处理函数--监听用户下拉动作
57+
*/
58+
onPullDownRefresh: function () {
59+
60+
},
61+
62+
/**
63+
* 页面上拉触底事件的处理函数
64+
*/
65+
onReachBottom: function () {
66+
67+
},
68+
69+
/**
70+
* 用户点击右上角分享
71+
*/
72+
onShareAppMessage: function () {
73+
74+
},
75+
76+
openCloseActive() {
77+
wx.redirectTo({
78+
url: '../circle/index',
79+
});
80+
},
81+
82+
add() {
83+
let percent = this.data.percent;
84+
if (percent > 100) {
85+
return;
86+
} else {
87+
percent += 5;
88+
this.setData({
89+
percent
90+
});
91+
}
92+
},
93+
94+
min() {
95+
let percent = this.data.percent;
96+
if (percent < 0) {
97+
return;
98+
} else {
99+
percent -= 5;
100+
this.setData({
101+
percent
102+
});
103+
}
104+
},
105+
106+
randomColor() {
107+
return '#' + (Math.random() * 0xffffff << 0).toString(16);
108+
},
109+
110+
random() {
111+
let activeColor = this.randomColor();
112+
let backgroundColor = this.randomColor();
113+
let innerColor = this.randomColor();
114+
let valueColor = this.randomColor();
115+
this.setData({
116+
activeColor,
117+
backgroundColor,
118+
innerColor,
119+
valueColor
120+
});
121+
},
122+
123+
addOuter() {
124+
let outerDiameter = this.data.outerDiameter;
125+
if (outerDiameter > 700) {
126+
return;
127+
} else {
128+
outerDiameter += 3;
129+
this.setData({
130+
outerDiameter
131+
});
132+
}
133+
},
134+
135+
minOuter() {
136+
let outerDiameter = this.data.outerDiameter;
137+
if (outerDiameter < this.data.innerDiameter || outerDiameter < 0) {
138+
return;
139+
} else {
140+
outerDiameter -= 3;
141+
this.setData({
142+
outerDiameter
143+
});
144+
}
145+
},
146+
147+
addInner() {
148+
let innerDiameter = this.data.innerDiameter;
149+
if (innerDiameter > 700 || innerDiameter > this.data.outerDiameter) {
150+
return;
151+
} else {
152+
innerDiameter += 3;
153+
this.setData({
154+
innerDiameter
155+
});
156+
}
157+
},
158+
159+
minInner() {
160+
let innerDiameter = this.data.innerDiameter;
161+
if (innerDiameter < 0) {
162+
return;
163+
} else {
164+
innerDiameter -= 3;
165+
this.setData({
166+
innerDiameter
167+
});
168+
}
169+
},
170+
171+
change() {
172+
let items = ['timg1.jpeg', 'timg2.jpeg', 'timg3.jpeg', 'timg4.jpeg'];
173+
var backgroundImage;
174+
do {
175+
backgroundImage = items[Math.floor(Math.random() * items.length)];
176+
}
177+
while (backgroundImage === this.data.backgroundImage);
178+
179+
this.setData({
180+
backgroundImage
181+
});
182+
}
183+
});

‎examples/pages/components/view/pages/circle/index.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"usingComponents": {
3+
"content-title": "/components/content-title/index",
4+
"content-card": "/components/content-card/index",
5+
"l-progress": "/dist/progress/index",
6+
"l-circle": "/dist/circle/index",
7+
"l-button": "/dist/button/index"
8+
}
9+
}

‎examples/pages/components/view/pages/circle/index.wxml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!-- pages/components/view/pages/circle/index.wxml -->
2+
<view class='container'>
3+
<content-title name="Circle" describe="圆形进度条">
4+
<content-card l-content="content" name="动画">
5+
<view class="circle-container">
6+
<l-circle duration="{{duration}}" percent='{{percent}}' active='{{openActive}}'></l-circle>
7+
</view>
8+
</content-card>
9+
<content-card l-content="content" name="基本使用">
10+
<view class="circle-container">
11+
<l-circle percent='{{percent}}' show-value='{{true}}'></l-circle>
12+
</view>
13+
<view class="button_list">
14+
<l-button l-class="button_class" plain="{{true}}" bind:tap="add">增加进度</l-button>
15+
<l-button l-class="button_class" plain="{{true}}" bind:tap="min">减少进度</l-button>
16+
</view>
17+
</content-card>
18+
<content-card l-content="content" name="更改内外直径">
19+
<view class="circle-container">
20+
<l-circle percent='60' outer-diameter='{{outerDiameter}}' inner-diameter='{{innerDiameter}}'></l-circle>
21+
</view>
22+
<view class="button_list" style="margin-top:30rpx">
23+
<l-button l-class="button_class" plain="{{true}}" bind:tap="addOuter">
24+
增加外径
25+
</l-button>
26+
<l-button l-class="button_class" plain="{{true}}" bind:tap="minOuter">
27+
减少外径
28+
</l-button>
29+
</view>
30+
<view class="button_list">
31+
<l-button l-class="button_class" plain="{{true}}" bind:tap="addInner">
32+
增加内经
33+
</l-button>
34+
<l-button l-class="button_class" plain="{{true}}" bind:tap="minInner">
35+
减少内经
36+
</l-button>
37+
</view>
38+
</content-card>
39+
<content-card l-content="content" name="更改颜色">
40+
<view class="circle-container">
41+
<l-circle percent='60' show-value='{{true}}' active-color='{{activeColor}}' background-color='{{backgroundColor}}' inner-color='{{innerColor}}' value-color='{{valueColor}}'></l-circle>
42+
</view>
43+
<view class="button_list">
44+
<l-button l-class="button_class" plain="{{true}}" bind:tap="random">随机颜色</l-button>
45+
<l-button l-class="button_class" plain="{{true}}" bind:tap="openCloseActive">
46+
刷新页面
47+
</l-button>
48+
</view>
49+
</content-card>
50+
<content-card l-content="content" name="自定义中间背景区域">
51+
<view class="circle-container">
52+
<l-circle percent='60' active-color='black'>
53+
<image src="{{backgroundImage}}" style="width:140rpx;height:140rpx;border-radius:50%;display:block;" />
54+
</l-circle>
55+
</view>
56+
<view class="button_list">
57+
<l-button l-class="button_class" plain="{{true}}" bind:tap="change">换一张背景</l-button>
58+
</view>
59+
</content-card>
60+
</content-title>
61+
</view>

‎examples/pages/components/view/pages/circle/index.wxss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/* pages/components/view/pages/circle/index.wxss */
2+
3+
.circle-container {
4+
display: flex;
5+
flex-direction: row;
6+
justify-content: space-evenly;
7+
margin-top: 30rpx;
8+
}
9+
10+
.button_list {
11+
display: flex;
12+
flex-direction: row;
13+
justify-content: space-evenly;
14+
width: 700rpx;
15+
margin-bottom: 30rpx;
16+
margin-top: 60rpx;
17+
}
18+
19+
.button_class {
20+
min-width: 10rpx !important;
21+
height: 60rpx !important;
22+
font-size: 20rpx !important;
23+
}

‎examples/pages/components/view/pages/circle/timg1.jpeg‎

30.7 KB
Loading

‎examples/pages/components/view/pages/circle/timg2.jpeg‎

22.6 KB
Loading

‎examples/pages/components/view/pages/circle/timg3.jpeg‎

26.2 KB
Loading

0 commit comments

Comments
 (0)