微信小程序实现课程选择器

本文实例为大家分享了微信小程序实现课程选择器的具体代码，供大家参考，具体内容如下
话不多说，直接上效果图

代码如下
wxml

1. <view class="urg_input">
2.    <picker class="gradePicker" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
3.     <input type="idcard" placeholder="请选择您的所授学科" value="{{teachPlaceholder}}" disabled></input>
4.    </picker>
5. </view>

复制代码

js

1. import { primarySchool, juniorSchool, highSchool, bigSchool} from './AllDataConfig.js'
2. Page({
3. data: {
4.   multiArray: [
5.    ['小学', '初中', '高中', '大学'],
6.    ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
7.    primarySchool[0]
8.   ],
9.   multiIndex: [0, 0, 0],
10.   teachPlaceholder: '',
11. },
12. /**
13. * 学科选择
14. */
15. bindMultiPickerChange: function (e) {
16.   // 确定之后获取选中的课程
17.   // console.log('picker发送选择改变，携带值为', e.detail.value)
18.   // 返回所选的三个参数
19.   this.setData({
20.    multiIndex: e.detail.value
21.   })
22.   let jiBie = this.data.multiArray[0][this.data.multiIndex[0]];
23.   let grade = this.data.multiArray[1][this.data.multiIndex[1]];
24.   let course = this.data.multiArray[2][this.data.multiIndex[2]];
25.   let teachCourse = jiBie + '' + grade + '' + course;
26.   this.setData({
27.    teachPlaceholder: teachCourse
28.   })
29. },
30. bindMultiPickerClumnChange: function (e) {
31.   // console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
32.   var data = {
33.    multiArray: this.data.multiArray,
34.    multiIndex: this.data.multiIndex
35.   };
36.   data.multiIndex[e.detail.column] = e.detail.value;
37.   // 第几列判断 只判断两列，第一列的级别，第二列的年级
38.   switch (e.detail.column) {
39.    // 选择第一列，设置第二列对应的年级
40.    case 0:
41.     switch (data.multiIndex[0]) {
42.      // 小学
43.      case 0:
44.       data.multiArray[1] = ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'];
45.       data.multiArray[2] = primarySchool[0];
46.       break;
47.      // 初中
48.      case 1:
49.       data.multiArray[1] = ['初一', '初二', '初三'];
50.       data.multiArray[2] = juniorSchool[0];
51.       break;
52.      // 高中
53.      case 2:
54.       data.multiArray[1] = ['高一', '高二', '高三'];
55.       data.multiArray[2] = highSchool[0];
56.       break;
57.      // 大学
58.      case 3:
59.       data.multiArray[1] = ['大一', '大二', '大三', '大四'];
60.       data.multiArray[2] = bigSchool[0];
61.       break;
62.     }
63.     data.multiIndex[1] = 0;
64.     data.multiIndex[2] = 0;
65.     break;
66.    // 选择第二列，设置对应的科目
67.    case 1:
68.     /**
69.     * 选择第一列对应的级别，然后判断第二列的年级，从而设置课程
70.     */
71.     switch (data.multiIndex[0]) {
72.      // 小学
73.      case 0:
74.       switch (data.multiIndex[1]) {
75.        // 一年级
76.        case 0:
77.         data.multiArray[2] = primarySchool[1];
78.         break;
79.        // 二年级
80.        case 1:
81.         data.multiArray[2] = primarySchool[2];
82.         break;
83.        // 三年级
84.        case 2:
85.         data.multiArray[2] = primarySchool[3];
86.         break;
87.        // 四年级
88.        case 3:
89.         data.multiArray[2] = primarySchool[4];
90.         break;
91.        // 五年级
92.        case 4:
93.         data.multiArray[2] = primarySchool[5];
94.         break;
95.        // 六年级
96.        case 5:
97.         data.multiArray[2] = primarySchool[6];
98.         break;
99.       }
100.       break;
101.      // 初中
102.      case 1:
103.       switch (data.multiIndex[1]) {
104.        // 初一
105.        case 0:
106.         data.multiArray[2] = juniorSchool[1];
107.         break;
108.        // 初二
109.        case 1:
110.         data.multiArray[2] = juniorSchool[2];
111.         break;
112.        // 初三
113.        case 2:
114.         data.multiArray[2] = juniorSchool[3];
115.         break;
116.       }
117.       break;
118.      // 高中
119.      case 2:
120.       switch (data.multiIndex[1]) {
121.        // 高一
122.        case 0:
123.         data.multiArray[2] = highSchool[1];
124.         break;
125.        // 高二
126.        case 1:
127.         data.multiArray[2] = highSchool[2];
128.         break;
129.        // 高三
130.        case 2:
131.         data.multiArray[2] = highSchool[3];
132.         break;
133.       }
134.       break;
135.      // 大学
136.      case 3:
137.       switch (data.multiIndex[1]) {
138.        // 大一
139.        case 0:
140.         data.multiArray[2] = bigSchool[1];
141.         break;
142.        // 大二
143.        case 1:
144.         data.multiArray[2] = bigSchool[2];
145.         break;
146.        // 大三
147.        case 2:
148.         data.multiArray[2] = bigSchool[3];
149.         break;
150.        // 大四
151.        case 3:
152.         data.multiArray[2] = bigSchool[4];
153.         break;
154.       }
155.       break;
156.     }
157.     data.multiIndex[2] = 0;
158.     break;
159.   }
160.   // console.log(data.multiIndex);
161.   this.setData(data);
162. },
163. })

复制代码

AllDataConfig.js

1. // 课程设置
2. // 小学
3. export const primarySchool = [
4. // 默认设置课程
5. ['语文', '数学', '英语','体育','美术','化学'],
6. // 一年级
7. ['语文', '数学', '英语'],
8. // 二年级
9. ['语文', '数学', '英语'],
10. // 三年级
11. ['语文', '数学', '英语'],
12. // 四年级
13. ['语文', '数学', '英语'],
14. // 五年级
15. ['语文', '数学', '英语'],
16. // 六年级
17. ['语文', '数学', '英语']
18. ]
19. // 初中
20. export const juniorSchool = [
21. // 默认设置课程
22. ['语文', '数学', '英语', '美术', '音乐', '政治', '历史', '物理', '化学', '地理', '生物'],
23. // 初一
24. ['语文', '数学', '英语', '美术', '音乐', '政治', '历史', '地理', '生物'],
25. // 初二
26. ['语文', '数学', '英语', '政治', '历史', '物理', '化学', '地理', '生物'],
27. // 初三
28. ['语文', '数学', '英语', '政治', '历史', '物理', '化学'],
29. ]
30. // 高中
31. export const highSchool = [
32. // 默认设置课程
33. ['语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学', '生物'],
34. // 高一
35. ['高一', '语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学', '生物'],
36. // 高二
37. ['高二', '语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学', '生物'],
38. // 高三
39. ['高三', '语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学', '生物'],
40. ]
41. export const bigSchool = [
42. // 默认设置课程
43. ['数学', '英语', '美术', '计算机', '政治'],
44. // 大一
45. ['大一', '数学', '英语', '美术', '计算机', '政治'],
46. // 大二
47. ['大二', '数学', '英语', '美术', '计算机', '政治'],
48. // 大三
49. ['大三', '数学', '英语', '美术', '计算机', '政治'],
50. // 大四
51. ['大四', '数学', '英语', '美术', '计算机', '政治'],
52. ]

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。