微信小程序实现课程选择器
本文实例为大家分享了微信小程序实现课程选择器的具体代码，供大家参考，具体内容如下
话不多说，直接上效果图
代码如下
wxml
<view class="urg_input">
<picker class="gradePicker" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<input type="idcard" placeholder="请选择您的所授学科" value="{{teachPlaceholder}}" disabled></input>
</picker>
</view>
js
import { primarySchool, juniorSchool, highSchool, bigSchool} from './AllDataConfig.js'
Page({
data: {
multiArray: [
['小学', '初中', '高中', '大学'],
['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
primarySchool[0]
],
multiIndex: [0, 0, 0],
teachPlaceholder: '',
},
/**
* 学科选择
*/
bindMultiPickerChange: function (e) {
// 确定之后获取选中的课程
// console.log('picker发送选择改变，携带值为', e.detail.value)
// 返回所选的三个参数
this.setData({
multiIndex: e.detail.value
})
let jiBie = this.data.multiArray[0][this.data.multiIndex[0]];
let grade = this.data.multiArray[1][this.data.multiIndex[1]];
let course = this.data.multiArray[2][this.data.multiIndex[2]];
let teachCourse = jiBie + '' + grade + '' + course;
this.setData({
teachPlaceholder: teachCourse
})
},
bindMultiPickerColumnChange: function (e) {
// console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
// 第几列判断 只判断两列，第一列的级别，第二列的年级
switch (e.detail.column) {
// 选择第一列，设置第二列对应的年级
case 0:
switch (data.multiIndex[0]) {
// 小学
case 0:
data.multiArray[1] = ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'];
data.multiArray[2] = primarySchool[0];
break;
// 初中
case 1:
data.multiArray[1] = ['初一', '初二', '初三'];
data.multiArray[2] = juniorSchool[0];
break;
// 高中
case 2:
data.multiArray[1] = ['高一', '高二', '高三'];
data.multiArray[2] = highSchool[0];
break;
// 大学
case 3:
data.multiArray[1] = ['大一', '大二', '大三', '大四'];
data.multiArray[2] = bigSchool[0];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
// 选择第二列，设置对应的科目
case 1:
/**
* 选择第一列对应的级别，然后判断第二列的年级，从而设置课程
*/
switch (data.multiIndex[0]) {
// 小学
case 0:
switch (data.multiIndex[1]) {
// 一年级
case 0:
data.multiArray[2] = primarySchool[1];
break;
// 二年级
case 1:
data.multiArray[2] = primarySchool[2];
break;
// 三年级
case 2:
data.multiArray[2] = primarySchool[3];
break;
// 四年级
case 3:
data.multiArray[2] = primarySchool[4];
break;
// 五年级
case 4:
data.multiArray[2] = primarySchool[5];
break;
// 六年级
case 5:
data.multiArray[2] = primarySchool[6];
break;
}
break;
// 初中
case 1:
switch (data.multiIndex[1]) {
// 初一
case 0:
data.multiArray[2] = juniorSchool[1];
break;
// 初二
case 1:
data.multiArray[2] = juniorSchool[2];
break;
// 初三
case 2:
data.multiArray[2] = juniorSchool[3];
break;
}
break;
// 高中
case 2:
switch (data.multiIndex[1]) {
// 高一
case 0:
data.multiArray[2] = highSchool[1];
break;
// 高二
case 1:
data.multiArray[2] = highSchool[2];
break;
// 高三
case 2:
data.multiArray[2] = highSchool[3];
break;
}
break;
// 大学
case 3:
switch (data.multiIndex[1]) {
// 大一
case 0:
data.multiArray[2] = bigSchool[1];
break;
// 大二
case 1:
data.multiArray[2] = bigSchool[2];
break;
// 大三
case 2:
data.multiArray[2] = bigSchool[3];
break;
// 大四
case 3:
data.multiArray[2] = bigSchool[4];
break;
}
break;
}
data.multiIndex[2] = 0;
break;
}
// console.log(data.multiIndex);
this.setData(data);
},
})
AllDataConfig.js
// 课程设置
// 小学
export const primarySchool = [
// 默认设置课程
['语文', '数学', '英语','体育','美术','化学'],
// 一年级
['语文', '数学', '英语'],
// 二年级
['语文', '数学', '英语'],
// 三年级
['语文', '数学', '英语'],
// 四年级
['语文', '数学', '英语'],
// 五年级
['语文', '数学', '英语'],
// 六年级
['语文', '数学', '英语']
]
// 初中
export const juniorSchool = [
// 默认设置课程
['语文', '数学', '英语', '美术', '音乐', '政治', '历史', '物理', '化学', '地理', '生物'],
// 初一
['语文', '数学', '英语', '美术', '音乐', '政治', '历史', '地理', '生物'],
// 初二
['语文', '数学', '英语', '政治', '历史', '物理', '化学', '地理', '生物'],
// 初三
['语文', '数学', '英语', '政治', '历史', '物理', '化学'],
]
// 高中
export const highSchool = [
// 默认设置课程
['语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学', '生物'],
// 高一
['高一', '语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学', '生物'],
// 高二
['高二', '语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学', '生物'],
// 高三
['高三', '语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学', '生物'],
]
export const bigSchool = [
// 默认设置课程
['数学', '英语', '美术', '计算机', '政治'],
// 大一
['大一', '数学', '英语', '美术', '计算机', '政治'],
// 大二
['大二', '数学', '英语', '美术', '计算机', '政治'],
// 大三
['大三', '数学', '英语', '美术', '计算机', '政治'],
// 大四
['大四', '数学', '英语', '美术', '计算机', '政治'],
]
