本文实例为大家分享了小程序实现多列选择器的具体代码,供大家参考,具体内容如下
代码分两部分,先上wxml
& lt;视图类=叭萜鳌北?
& lt;形式catchsubmit=癴ormSubmit”比;
& lt;视图类=癴orm-card”比;
& lt;视图类=" weui-cell weui-cell_input”比;
& lt;视图类=皐eui-cell__hd”比;
& lt;视图类=" weui-label "祝辞物种& lt; span> * & lt;/span> & lt;/view>
& lt;/view>
& lt;视图类=皐eui-cell__bd”比;
& lt;选择模式=" multiSelector " bindchange=癰indMultiPickerChange bindcolumnchange”=癰indMultiPickerColumnChange”value=" https://www.yisu.com/zixun/{{multiIndex}}”范围=皗{multiArray}}”比;
& lt;视图类=" weui-input "在{{multiArray [0] [multiIndex [0]]}} {{multiArray [1] [multiIndex [1]]}} {{multiArray [2] [multiIndex [2]]}} & lt;/view>
& lt;/picker>
& lt;/view>
& lt;/view>
& lt;/view>
& lt;/form>
& lt;/view>
其次是js
页面({/* *
* 页面的初始数据
*/数据:{
objectMultiShow: [],
objectMultiArray: [],
multiArray: [],
multiIndex: [],
checkeIndex: []
},/* *
* 生命周期函数--监听页面加载
* objectMultiShow——匹配多列选择器渲染数据所对应的json数据(包含id, parentId,名称)
* multiArray——多列选择器渲染数据
*/onLoad:功能(选项){//初始化
让数据=https://www.yisu.com/zixun/{
objectMultiShow: this.data.objectMultiShow,
objectMultiArray: this.data.objectMultiArray,
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex,
checkeIndex: this.data.checkeIndex
}
数据。objectMultiArray=[
[{id: 0,名字:“无脊柱动物”},{id: 1、名称:“脊柱动物'}),
(
{id: 0,名字:“扁性动物”,parentId: 0}, {id: 1、名称:线的形动物”,parentId: 0}, {id: 2,名字:“环节动物”,parentId: 0}, {id: 3,名字:“软体动物”,parentId: 0}, {id: 4,名字:“节肢动物”,parentId: 0},
{id: 5,名字:“鱼”,parentId: 1}, {id: 6,名字:“两栖动物”,parentId: 1}, {id: 7,名字:“爬行动物”,parentId: 1}
),
(
{id: 0,名字:“猪肉绦虫”,parentId: 0}, {id: 1、名称:吸的血虫”,parentId: 0},
{id: 2、名称:“蛔虫”,parentId: 1},
{id: 3、名称:“蚂蚁”,parentId: 2}, {id: 4,名字:“蚂蟥’,parentId: 2},
{id: 5、名称:“河蚌”,parentId: 3}, {id: 6,名字:“蜗牛”,parentId: 3}, {id: 7,名字:“蛞蝓’,parentId: 3},
{id: 8、名称:“昆虫”,parentId: 4}, {id: 9,名字:“甲壳动物”,parentId: 4}, {id: 10,名字:“蛛形动物”,parentId: 4}, {id: 11日,名字:“多足动物”,parentId: 4},
{id: 3、名称:“鲫鱼”,parentId: 5}, {id: 4,名字:“带鱼”,parentId: 5},
{id: 3、名称:“青蛙”,parentId: 6}, {id: 4,名字:“娃娃鱼”,parentId: 6},
{id: 3、名称:“蜥蜴’,parentId: 7}, {id: 4,名字:“龟”,parentId: 7}, {id: 4,名字:“壁虎”,parentId: 7},
]
]
数据。objectMultiShow=data.objectMultiArray。地图((项目、索引)=比;{
如果(指数比;0){
项目=项目。过滤器(i=比;我。parentId===数据。objectMultiArray[指数- 1][0].id)
}
返回项目
}）
数据。multiArray=data.objectMultiShow。地图(项=比;{
项目=项目。地图(i=比;i.name)
返回项目
}）
console.log (data.multiIndex)//数据更新
this.setData(数据)
},
bindMultiPickerChange:函数(e) {
控制台。日志(“选择发送选择改变,携带值为’,e.detail.value)
this.setData ({
multiIndex: e.detail.value
}）
},
bindMultiPickerColumnChange:函数(e) {
控制台。日志(“修改的列为’,e.detail.column,”,值为“,e.detail.value);//初始化数据
var=https://www.yisu.com/zixun/{数据
objectMultiShow: this.data.objectMultiShow,
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};//改变第我列数据之后,后几列选择第0个选项(重置)
data.multiIndex [e.detail.column]=e.detail.value;
(让我=e.detail.column;我小程序实现多列选择器
