微信小程序?qū)崿F(xiàn)課程選擇器
更新時間:2022年07月11日 13:47:27 作者:L.P.H
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)課程選擇器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)課程選擇器的具體代碼,供大家參考,具體內(nèi)容如下
話不多說,直接上效果圖
代碼如下
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發(fā)送選擇改變,攜帶值為', e.detail.value) ? ? // 返回所選的三個參數(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; ? ? // 第幾列判斷 只判斷兩列,第一列的級別,第二列的年級 ? ? 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 = [ ? // 默認設置課程 ? ['語文', '數(shù)學', '英語','體育','美術(shù)','化學'], ? // 一年級 ? ['語文', '數(shù)學', '英語'], ? // 二年級 ? ['語文', '數(shù)學', '英語'], ? // 三年級 ? ['語文', '數(shù)學', '英語'], ? // 四年級 ? ['語文', '數(shù)學', '英語'], ? // 五年級 ? ['語文', '數(shù)學', '英語'], ? // 六年級 ? ['語文', '數(shù)學', '英語'] ] // 初中 export const juniorSchool = [ ? // 默認設置課程 ? ['語文', '數(shù)學', '英語', '美術(shù)', '音樂', '政治', '歷史', '物理', '化學', '地理', '生物'], ? // 初一 ? ['語文', '數(shù)學', '英語', '美術(shù)', '音樂', '政治', '歷史', '地理', '生物'], ? // 初二 ? ['語文', '數(shù)學', '英語', '政治', '歷史', '物理', '化學', '地理', '生物'], ? // 初三 ? ['語文', '數(shù)學', '英語', '政治', '歷史', '物理', '化學'], ] // 高中 export const highSchool = [ ? // 默認設置課程 ? ['語文', '數(shù)學', '英語', '政治', '歷史', '地理', '物理', '化學', '生物'], ? // 高一 ? ['高一', '語文', '數(shù)學', '英語', '政治', '歷史', '地理', '物理', '化學', '生物'], ? // 高二 ? ['高二', '語文', '數(shù)學', '英語', '政治', '歷史', '地理', '物理', '化學', '生物'], ? // 高三 ? ['高三', '語文', '數(shù)學', '英語', '政治', '歷史', '地理', '物理', '化學', '生物'], ] export const bigSchool = [ ? // 默認設置課程 ? ['數(shù)學', '英語', '美術(shù)', '計算機', '政治'], ? // 大一 ? ['大一', '數(shù)學', '英語', '美術(shù)', '計算機', '政治'], ? // 大二 ? ['大二', '數(shù)學', '英語', '美術(shù)', '計算機', '政治'], ? // 大三 ? ['大三', '數(shù)學', '英語', '美術(shù)', '計算機', '政治'], ? // 大四 ? ['大四', '數(shù)學', '英語', '美術(shù)', '計算機', '政治'], ]
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05優(yōu)化innerHTML操作(提高代碼執(zhí)行效率)
多數(shù)現(xiàn)代瀏覽器都實現(xiàn)了innerHTML操作,它的方便性讓我們愛不釋手,但如果使用不當,很容易出現(xiàn)效率問題,本文通過一個例子來說明如何優(yōu)化innerHTML操作。2011-08-08使用firebug進行調(diào)試javascript的示例
調(diào)試javascript的方法有很多,在本文為大家介紹下使用firebug是如何做到的,感興趣的朋友可以參考下2013-12-12微信小程序怎么加入JavaScript腳本,做出動態(tài)效果
這篇文章主要介紹了教大家為小程序加入?JavaScript?腳本,做出動態(tài)效果,以及如何跟用戶互動。學會了腳本,就能做出復雜的頁面了。需要的朋友可以參考下2022-12-12