本文实例为大家分享了微信小程序实现课程选择器的具体代码，供大家参考，具体内容如下
话不多说，直接上效果图
代码如下
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 = [ ? // 默认设置课程 ? ['数学', '英语', '美术', '计算机', '政治'], ? // 大一 ? ['大一', '数学', '英语', '美术', '计算机', '政治'], ? // 大二 ? ['大二', '数学', '英语', '美术', '计算机', '政治'], ? // 大三 ? ['大三', '数学', '英语', '美术', '计算机', '政治'], ? // 大四 ? ['大四', '数学', '英语', '美术', '计算机', '政治'], ]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did124143