本文实例为大家分享了微信小程序实现课程选择器的具体代码，供大家参考，具体内容如下 话不多说，直接上效果图 代码如下 wxml view class="urg_input" picker class="gradePicker" mode="mul
本文实例为大家分享了微信小程序实现课程选择器的具体代码，供大家参考，具体内容如下
话不多说，直接上效果图
代码如下
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 = [ // 默认设置课程 ['数学', '英语', '美术', '计算机', '政治'], // 大一 ['大一', '数学', '英语', '美术', '计算机', '政治'], // 大二 ['大二', '数学', '英语', '美术', '计算机', '政治'], // 大三 ['大三', '数学', '英语', '美术', '计算机', '政治'], // 大四 ['大四', '数学', '英语', '美术', '计算机', '政治'], ]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。