第微信小程序?qū)崿F(xiàn)課程選擇器本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)課程選擇器的具體代碼，供大家參考，具體內(nèi)容如下

話不多說，直接上效果圖

代碼如下

wxml

view

pickermode="multiSelector"bindchange="bindMultiPickerChange"bindcolumnchange="bindMultiPickerColumnChange"value="{{multiIndex}}"range="{{multiArray}}"

inputtype="idcard"placeholder="請選擇您的所授學(xué)科"value="{{teachPlaceholder}}"

disabled/input

/picker

/view

js

import{primarySchool,juniorSchool,highSchool,bigSchool}from'./AllDataConfig.js'

Page({

data:{

multiArray:[

['小學(xué)','初中','高中','大學(xué)'],

['一年級','二年級','三年級','四年級','五年級','六年級'],

primarySchool[0]

],

multiIndex:[0,0,0],

teachPlaceholder:'',

/**

*學(xué)科選擇

*/

bindMultiPickerChange:function(e){

//確定之后獲取選中的課程

//console.log('picker發(fā)送選擇改變，攜帶值為',e.detail.value)

//返回所選的三個參數(shù)

this.setData({

multiIndex:e.detail.value

})

letjiBie=this.data.multiArray[0][this.data.multiIndex[0]];

letgrade=this.data.multiArray[1][this.data.multiIndex[1]];

letcourse=this.data.multiArray[2][this.data.multiIndex[2]];

letteachCourse=jiBie+''+grade+''+course;

this.setData({

teachPlaceholder:teachCourse

})

bindMultiPickerColumnChange:function(e){

//console.log('修改的列為',e.detail.column,'，值為',e.detail.value);

vardata={

multiArray:this.data.multiArray,

multiIndex:this.data.multiIndex

};

data.multiIndex[e.detail.column]=e.detail.value;

//第幾列判斷只判斷兩列，第一列的級別，第二列的年級

switch(e.detail.column){

//選擇第一列，設(shè)置第二列對應(yīng)的年級

case0:

switch(data.multiIndex[0]){

//小學(xué)

case0:

data.multiArray[1]=['一年級','二年級','三年級','四年級','五年級','六年級'];

data.multiArray[2]=primarySchool[0];

break;

//初中

case1:

data.multiArray[1]=['初一','初二','初三'];

data.multiArray[2]=juniorSchool[0];

break;

//高中

case2:

data.multiArray[1]=['高一','高二','高三'];

data.multiArray[2]=highSchool[0];

break;

//大學(xué)

case3:

data.multiArray[1]=['大一','大二','大三','大四'];

data.multiArray[2]=bigSchool[0];

break;

}

data.multiIndex[1]=0;

data.multiIndex[2]=0;

break;

//選擇第二列，設(shè)置對應(yīng)的科目

case1:

/**

*選擇第一列對應(yīng)的級別，然后判斷第二列的年級，從而設(shè)置課程

*/

switch(data.multiIndex[0]){

//小學(xué)

case0:

switch(data.multiIndex[1]){

//一年級

case0:

data.multiArray[2]=primarySchool[1];

break;

//二年級

case1:

data.multiArray[2]=primarySchool[2];

break;

//三年級

case2:

data.multiArray[2]=primarySchool[3];

break;

//四年級

case3:

data.multiArray[2]=primarySchool[4];

break;

//五年級

case4:

data.multiArray[2]=primarySchool[5];

break;

//六年級

case5:

data.multiArray[2]=primarySchool[6];

break;

}

break;

//初中

case1:

switch(data.multiIndex[1]){

//初一

case0:

data.multiArray[2]=juniorSchool[1];

break;

//初二

case1:

data.multiArray[2]=juniorSchool[2];

break;

//初三

case2:

data.multiArray[2]=juniorSchool[3];

break;

}

break;

//高中

case2:

switch(data.multiIndex[1]){

//高一

case0:

data.multiArray[2]=highSchool[1];

break;

//高二

case1:

data.multiArray[2]=highSchool[2];

break;

//高三

case2:

data.multiArray[2]=highSchool[3];

break;

}

break;

//大學(xué)

case3:

switch(data.multiIndex[1]){

//大一

case0:

data.multiArray[2]=bigSchool[1];

break;

//大二

case1:

data.multiArray[2]=bigSchool[2];

break;

//大三

case2:

data.multiArray[2]=bigSchool[3];

break;

//大四

case3:

data.multiArray[2]=bigSchool[4];

break;

}

break;

}

data.multiIndex[2]=0;

break;

}

//console.log(data.multiIndex);

this.setData(data);

AllDataConfig.js

//課程設(shè)置

//小學(xué)

exportconstprimarySchool=[

//默認(rèn)設(shè)置課程

['語文','數(shù)學(xué)','英語','體育','美術(shù)','化學(xué)'],

//一年級

['語文','數(shù)學(xué)','英語'],

//二年級

['語文','數(shù)學(xué)','英語'],

//三年級

['語文','數(shù)學(xué)','英語'],

//四年級

['語文','數(shù)學(xué)','英語'],

//五年級

['語文','數(shù)學(xué)','英語'],

//六年級

['語文','數(shù)學(xué)','英語']

//初中

exportconstjuniorSchool=[

//默認(rèn)設(shè)置課程

['語文','數(shù)學(xué)','英語','美術(shù)','音樂','政治','歷史','物理','化學(xué)','地理','生物'],

//初一

['語文','數(shù)學(xué)','英語','美術(shù)','音樂','政治','歷史','地理','生物'],

//初二

['語文','數(shù)學(xué)','英語','政治','歷史','物理','化學(xué)','地理','生物'],

//初三

['語文','數(shù)學(xué)','英語','政治','歷史','物理','化學(xué)'],

//高中

exp