微信小程序中课程选择器演示代码

　　微信小程序中课程选择器如何实现？先看看实现效果：

　　代码如下

　　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 = [
　　// 默认设置课程
　　['数学', '英语', '美术', '计算机', '政治'],
　　// 大一
　　['大一', '数学', '英语', '美术', '计算机', '政治'],
　　// 大二
　　['大二', '数学', '英语', '美术', '计算机', '政治'],
　　// 大三
　　['大三', '数学', '英语', '美术', '计算机', '政治'],
　　// 大四
　　['大四', '数学', '英语', '美术', '计算机', '政治'],
　　]

　微信小程序中实现课程选择已全部讲述完，希望大家多多关注后续更多精彩内容。