微信小程序?qū)崿F(xiàn)課程選擇器
更新時(shí)間：2022年07月11日 13:47:27 作者：L.P.H
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)課程選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)課程選擇器的具體代碼，供大家參考，具體內(nèi)容如下
話不多說(shuō)，直接上效果圖
代碼如下
wxml
<view class="urg_input">
? ? ? <picker class="gradePicker" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
? ? ? ? <input type="idcard" placeholder="請(qǐng)選擇您的所授學(xué)科" value="{{teachPlaceholder}}" ?disabled></input>
? ? ? </picker>
</view>js
import { primarySchool, juniorSchool, highSchool, bigSchool} from './AllDataConfig.js'
Page({
? data: {
? ? multiArray: [
? ? ? ['小學(xué)', '初中', '高中', '大學(xué)'],
? ? ? ['一年級(jí)', '二年級(jí)', '三年級(jí)', '四年級(jí)', '五年級(jí)', '六年級(jí)'],
? ? ? primarySchool[0]
? ? ],
? ? multiIndex: [0, 0, 0],
? ? teachPlaceholder: '',
? },
? /**
? ?* 學(xué)科選擇
? ?*/
? bindMultiPickerChange: function (e) {
? ? // 確定之后獲取選中的課程
? ? // console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
? ? // 返回所選的三個(gè)參數(shù)
? ? 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;
? ? // 第幾列判斷 只判斷兩列，第一列的級(jí)別，第二列的年級(jí)
? ? switch (e.detail.column) {
? ? ? // 選擇第一列，設(shè)置第二列對(duì)應(yīng)的年級(jí)
? ? ? case 0:
? ? ? ? switch (data.multiIndex[0]) {
? ? ? ? ? // 小學(xué)
? ? ? ? ? case 0:
? ? ? ? ? ? data.multiArray[1] = ['一年級(jí)', '二年級(jí)', '三年級(jí)', '四年級(jí)', '五年級(jí)', '六年級(jí)'];
? ? ? ? ? ? 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;
? ? ? ? ? // 大學(xué)
? ? ? ? ? case 3:
? ? ? ? ? ? data.multiArray[1] = ['大一', '大二', '大三', '大四'];
? ? ? ? ? ? data.multiArray[2] = bigSchool[0];
? ? ? ? ? ? break;
? ? ? ? }
? ? ? ? data.multiIndex[1] = 0;
? ? ? ? data.multiIndex[2] = 0;
? ? ? ? break;
? ? ? // 選擇第二列，設(shè)置對(duì)應(yīng)的科目
? ? ? case 1:
? ? ? ? /**
? ? ? ? ?* 選擇第一列對(duì)應(yīng)的級(jí)別，然后判斷第二列的年級(jí)，從而設(shè)置課程
? ? ? ? ?*/
? ? ? ? switch (data.multiIndex[0]) {
? ? ? ? ? // 小學(xué)
? ? ? ? ? case 0:
? ? ? ? ? ? switch (data.multiIndex[1]) {
? ? ? ? ? ? ? // 一年級(jí)
? ? ? ? ? ? ? case 0:
? ? ? ? ? ? ? ? data.multiArray[2] = primarySchool[1];
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? // 二年級(jí)
? ? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? data.multiArray[2] = primarySchool[2];
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? // 三年級(jí)
? ? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? data.multiArray[2] = primarySchool[3];
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? // 四年級(jí)
? ? ? ? ? ? ? case 3:
? ? ? ? ? ? ? ? data.multiArray[2] = primarySchool[4];
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? // 五年級(jí)
? ? ? ? ? ? ? case 4:
? ? ? ? ? ? ? ? data.multiArray[2] = primarySchool[5];
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? // 六年級(jí)
? ? ? ? ? ? ? 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;
? ? ? ? ? // 大學(xué)
? ? ? ? ? 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
// 課程設(shè)置 // 小學(xué) export const primarySchool = [ ? // 默認(rèn)設(shè)置課程 ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)','體育','美術(shù)','化學(xué)'], ? // 一年級(jí) ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)'], ? // 二年級(jí) ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)'], ? // 三年級(jí) ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)'], ? // 四年級(jí) ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)'], ? // 五年級(jí) ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)'], ? // 六年級(jí) ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)'] ] // 初中 export const juniorSchool = [ ? // 默認(rèn)設(shè)置課程 ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)', '美術(shù)', '音樂(lè)', '政治', '歷史', '物理', '化學(xué)', '地理', '生物'], ? // 初一 ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)', '美術(shù)', '音樂(lè)', '政治', '歷史', '地理', '生物'], ? // 初二 ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)', '政治', '歷史', '物理', '化學(xué)', '地理', '生物'], ? // 初三 ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)', '政治', '歷史', '物理', '化學(xué)'], ] // 高中 export const highSchool = [ ? // 默認(rèn)設(shè)置課程 ? ['語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)', '政治', '歷史', '地理', '物理', '化學(xué)', '生物'], ? // 高一 ? ['高一', '語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)', '政治', '歷史', '地理', '物理', '化學(xué)', '生物'], ? // 高二 ? ['高二', '語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)', '政治', '歷史', '地理', '物理', '化學(xué)', '生物'], ? // 高三 ? ['高三', '語(yǔ)文', '數(shù)學(xué)', '英語(yǔ)', '政治', '歷史', '地理', '物理', '化學(xué)', '生物'], ] export const bigSchool = [ ? // 默認(rèn)設(shè)置課程 ? ['數(shù)學(xué)', '英語(yǔ)', '美術(shù)', '計(jì)算機(jī)', '政治'], ? // 大一 ? ['大一', '數(shù)學(xué)', '英語(yǔ)', '美術(shù)', '計(jì)算機(jī)', '政治'], ? // 大二 ? ['大二', '數(shù)學(xué)', '英語(yǔ)', '美術(shù)', '計(jì)算機(jī)', '政治'], ? // 大三 ? ['大三', '數(shù)學(xué)', '英語(yǔ)', '美術(shù)', '計(jì)算機(jī)', '政治'], ? // 大四 ? ['大四', '數(shù)學(xué)', '英語(yǔ)', '美術(shù)', '計(jì)算機(jī)', '政治'], ]
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
分享一個(gè)自己寫(xiě)的table表格排序js插件(高效簡(jiǎn)潔)
在前不久做的一個(gè)web項(xiàng)目中，需要實(shí)現(xiàn)js表格排序的效果，當(dāng)時(shí)為了省事，就在網(wǎng)上找了幾個(gè)相關(guān)的js插件2011-10-10
這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了canvas實(shí)現(xiàn)圖像放大鏡的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
優(yōu)化innerHTML操作(提高代碼執(zhí)行效率)
多數(shù)現(xiàn)代瀏覽器都實(shí)現(xiàn)了innerHTML操作，它的方便性讓我們愛(ài)不釋手，但如果使用不當(dāng)，很容易出現(xiàn)效率問(wèn)題，本文通過(guò)一個(gè)例子來(lái)說(shuō)明如何優(yōu)化innerHTML操作。2011-08-08
原生js實(shí)現(xiàn)的金山打字小游戲（實(shí)例代碼詳解）
這篇文章主要介紹了原生js實(shí)現(xiàn)的金山打字小游戲，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
使用firebug進(jìn)行調(diào)試javascript的示例
調(diào)試javascript的方法有很多，在本文為大家介紹下使用firebug是如何做到的，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了JS中的模糊查詢功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
js最實(shí)用string(字符串)類型的使用及截取與拼接詳解
這篇文章主要介紹了js string使用截取與拼接，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
微信小程序怎么加入JavaScript腳本，做出動(dòng)態(tài)效果
這篇文章主要介紹了教大家為小程序加入?JavaScript?腳本，做出動(dòng)態(tài)效果，以及如何跟用戶互動(dòng)。學(xué)會(huì)了腳本，就能做出復(fù)雜的頁(yè)面了。需要的朋友可以參考下2022-12-12
前幾天一個(gè)同事問(wèn)我如下的JavaScript代碼如何理解2009-06-06