亲宝软件园·资讯

展开

微信小程序课程选择器

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 = [
  // 默认设置课程
  ['数学', '英语', '美术', '计算机', '政治'],
  // 大一
  ['大一', '数学', '英语', '美术', '计算机', '政治'],
  // 大二
  ['大二', '数学', '英语', '美术', '计算机', '政治'],
  // 大三
  ['大三', '数学', '英语', '美术', '计算机', '政治'],
  // 大四
  ['大四', '数学', '英语', '美术', '计算机', '政治'],
]

加载全部内容

相关教程
猜你喜欢
用户评论