在开发校园类微信小程序时,总是不可避免地需要用到“学院”“专业”“班级”三级联动,让用户尽可能少地输入文字而是选择,以提升用户体验。
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{
{multiIndex}}" range="{
{multiArray}}">
<view class="picker">
{
{multiArray[0][multiIndex[0]]}},{
{multiArray[1][multiIndex[1]]}},{
{multiArray[2][multiIndex[2]]}}
</view>
</picker>
// pages/bm/bm.js
Page({
/**
* 页面的初始数据
*/
data: {
college: '',//存放地区
major: '',//存放维修站
class:'',// 存放维修人员
multiArray: [[], [], []],
multiIndex: [0, 0, 0]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getclasslist();
},
getclasslist:function(){
let that=this
that.setData({
college: ['化生院', '土环院','马院','人文院','外院','美院','电信院','传媒院','体院','理学院','经管院','旅文院','音舞院','国学院'],
major: {
'化生院': ['化学(师范)', '生物工程', '食品质量与安全', '生物技术', '生物技术(师范)','制药工程','材料化学'],
'土环院': ['工程管理', '土木工程', '测绘工程','建筑学'],
'马院': ['思想政治教育(师范)'],
'人文院': ['汉语言文学(师范)', '秘书学', '法学','预科'],
'外院':['英语(师范)', '商务英语', '日语'],
'美院':['美术学', '视觉传达设计', '环境设计','产品设计'],
'电信院':['电子信息工程', '电子科学与技术', '计算机科学与技术','通信工程','软件工程','数据科学与大数据技术','机械设计制造及自动化','教育技术'],
'传媒院':['广告学', '广播电视学', '广播电视编导','数字媒体技术'],
'体院':['体育教育(师范)'],
'理学院':['数学与应用数学(师范)', '信息与计算科学', '物理学(师范)'],
'经管院':['国际经济与贸易', '市场营销', '金融工程','财务管理'],
'旅文院':['旅游管理', '文化产业管理', '航空服务艺术与管理'],
'音舞院':['音乐学', '舞蹈学'],
'国学院':['汉语言文学(国学)']
},
class:{
'化学(师范)':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],
'生物工程':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],
'食品质量与安全':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'], '生物技术':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'], '生物技术(师范)':['2001','2002','2003','2004',