微信小程序课程选择器
L.P.H 人气:0话不多说,直接上效果图
代码如下
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 = [ // 默认设置课程 ['数学', '英语', '美术', '计算机', '政治'], // 大一 ['大一', '数学', '英语', '美术', '计算机', '政治'], // 大二 ['大二', '数学', '英语', '美术', '计算机', '政治'], // 大三 ['大三', '数学', '英语', '美术', '计算机', '政治'], // 大四 ['大四', '数学', '英语', '美术', '计算机', '政治'], ]
加载全部内容