Skip to content

Commit c658b1a

Browse files
ch-zgh-1993ch-zgh-1993
committed
style: picker 多列示例数据， feature: radio, slider, checkbox, switch 新增大小样式示例
1 parent 5991910 commit c658b1a

File tree

5 files changed

+68
-48
lines changed

5 files changed

+68
-48
lines changed

‎pages/component/checkbox/checkbox.vue‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,17 @@
1313
</label>
1414
</checkbox-group>
1515
</view>
16+
<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
17+
<view>
18+
<checkbox-group>
19+
<label>
20+
<checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
21+
</label>
22+
<label>
23+
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
24+
</label>
25+
</checkbox-group>
26+
</view>
1627
</view>
1728

1829
<view class="uni-padding-wrap">
@@ -37,7 +48,7 @@
3748
export default {
3849
data() {
3950
return {
40-
title: 'checkbox',
51+
title: 'checkbox 复选框',
4152
items: [{
4253
value: 'USA',
4354
name: '美国'

‎pages/component/picker/picker.vue‎

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,9 @@
8686
array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],
8787
index: 0,
8888
multiArray: [
89-
['无脊柱动物', '脊柱动物'],
90-
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
91-
['猪肉绦虫', '吸血虫']
89+
['亚洲', '欧洲'],
90+
['中国', '日本'],
91+
['北京', '上海', '广州']
9292
],
9393
multiIndex: [0, 0, 0],
9494
date: getDate({
@@ -108,51 +108,39 @@
108108
console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
109109
this.multiIndex[e.detail.column] = e.detail.value
110110
switch (e.detail.column) {
111-
case 0:
111+
case 0: //拖动第1列
112112
switch (this.multiIndex[0]) {
113113
case 0:
114-
this.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']
115-
this.multiArray[2] = ['猪肉绦虫', '吸血虫']
114+
this.multiArray[1] = ['中国', '日本']
115+
this.multiArray[2] = ['北京', '上海', '广州']
116116
break
117117
case 1:
118-
this.multiArray[1] = ['鱼', '两栖动物', '爬行动物']
119-
this.multiArray[2] = ['鲫鱼', '带鱼']
118+
this.multiArray[1] = ['英国', '法国']
119+
this.multiArray[2] = ['伦敦', '曼彻斯特']
120120
break
121121
}
122122
this.multiIndex[1] = 0
123123
this.multiIndex[2] = 0
124124
break
125-
case 1:
126-
switch (this.multiIndex[0]) {
125+
case 1: //拖动第2列
126+
switch (this.multiIndex[0]) { //判断第一列是什么
127127
case 0:
128128
switch (this.multiIndex[1]) {
129129
case 0:
130-
this.multiArray[2] = ['猪肉绦虫', '吸血虫']
130+
this.multiArray[2] = ['北京', '上海', '广州']
131131
break
132132
case 1:
133-
this.multiArray[2] = ['蛔虫']
134-
break
135-
case 2:
136-
this.multiArray[2] = ['蚂蚁', '蚂蟥']
137-
break
138-
case 3:
139-
this.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓']
140-
break
141-
case 4:
142-
this.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物']
133+
this.multiArray[2] = ['东京','北海道']
143134
break
144135
}
145136
break
146137
case 1:
147138
switch (this.multiIndex[1]) {
148139
case 0:
149-
this.multiArray[2] = ['鲫鱼', '带鱼']
140+
this.multiArray[2] = ['伦敦', '曼彻斯特']
150141
break
151142
case 1:
152-
this.multiArray[2] = ['青蛙', '娃娃鱼']
153-
break
154-
case 2:
155-
this.multiArray[2] = ['蜥蜴', '龟', '壁虎']
143+
this.multiArray[2] = ['巴黎', '马赛']
156144
break
157145
}
158146
break

‎pages/component/radio/radio.vue‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,17 @@
1212
</label>
1313
</view>
1414
</view>
15+
<view class="uni-padding-wrap">
16+
<view class="uni-title">不同颜色和尺寸的radio</view>
17+
<view>
18+
<label class="radio" style="margin-right: 30upx;">
19+
<radio value="r1" checked="true" color="#FFCC33" style="transform:scale(0.7)"/>选中
20+
</label>
21+
<label class="radio">
22+
<radio value="r2" color="#FFCC33" style="transform:scale(0.7)"/>未选中
23+
</label>
24+
</view>
25+
</view>
1526
<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
1627
<view class="uni-list">
1728
<radio-group @change="radioChange">
@@ -29,7 +40,7 @@
2940
export default {
3041
data() {
3142
return {
32-
title: 'radio',
43+
title: 'radio 单选框',
3344
items: [{
3445
value: 'USA',
3546
name: '美国'

‎pages/component/slider/slider.vue‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
11
<template>
2-
<view>
3-
<page-head :title="title"></page-head>
4-
<view class="uni-padding-wrap uni-common-mt">
2+
<view>
3+
<page-head :title="title"></page-head>
4+
<view class="uni-padding-wrap uni-common-mt">
55
<view class="uni-title">设置step</view>
66
<view>
77
<slider value="60" @change="sliderChange" step="5" />
88
</view>
9-
9+
1010
<view class="uni-title">显示当前value</view>
1111
<view>
1212
<slider value="50" @change="sliderChange" show-value />
1313
</view>
14-
14+
1515
<view class="uni-title">设置最小/最大值</view>
1616
<view>
1717
<slider value="100" @change="sliderChange" min="50" max="200" show-value />
1818
</view>
19-
</view>
20-
</view>
19+
20+
<view class="uni-title">不同颜色和大小的滑块</view>
21+
<view>
22+
<slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
23+
</view>
24+
</view>
25+
</view>
2126
</template>
2227
<script>
23-
export default {
24-
data() {
25-
return {
26-
title: 'slider'
27-
}
28-
},
29-
methods: {
30-
sliderChange(e) {
31-
console.log('value 发生变化：' + e.detail.value)
32-
}
33-
}
34-
}
28+
export default {
29+
data() {
30+
return {
31+
title: 'slider 滑块'
32+
}
33+
},
34+
methods: {
35+
sliderChange(e) {
36+
console.log('value 发生变化：' + e.detail.value)
37+
}
38+
}
39+
}
3540
</script>

‎pages/component/switch/switch.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
<switch checked @change="switch1Change" />
88
<switch @change="switch2Change" />
99
</view>
10+
<view class="uni-title">不同颜色和尺寸的switch</view>
11+
<view>
12+
<switch checked color="#FFCC33" style="transform:scale(0.7)"/>
13+
<switch color="#FFCC33" style="transform:scale(0.7)"/>
14+
</view>
1015

1116
<view class="uni-title">推荐展示样式</view>
1217
</view>
@@ -26,7 +31,7 @@
2631
export default {
2732
data() {
2833
return {
29-
title: 'switch'
34+
title: 'switch 开关'
3035
}
3136
},
3237
methods: {

0 commit comments

Comments
 (0)