The use of picker selectors in uni applet, such as province and city style multi-column selectors
The scroll selector that comes with uni.app. There are five methods in total, distinguished by mode, namely: ordinary selector, multi-column selector, date selector, event selector and province and city selector. This article demonstrates the use of multi-column selectors
Give it a thumbs up if it's useful to you. . . Thumbs up. . . Thumbs up. .
1: Look at the effect first
Only the selected second-level data is displayed here. If other levels of data are displayed, just fill in the subscript.
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" @change='btnevt'>
<view class="canj-top-dis">
// 这里只展示下标1的数据，根据需求选择增加
<view class="uni-input">{
{
multiArray[1][multiIndex[1]] }}</view>
<uni-icons type="bottom" size="30"></uni-icons>
</view>
</picker>
Variable definitions
multiIndex: [0, 0], // 选择器默认值
multiArray:[],
sendDate:{
sysid:''},
typedata:[]
Interface data format, data processing method
this.typedata = [
{
year: '2022',
value: 1,
children: [
{
name: '2022秋季', value: 1.1, sysid: '' },
{
name: '2022夏季', value: 1.2, sysid: '' },
],
},
{
year: '2023',
value: 2,
children: [
{
name: '2023秋季', value: 2.1, sysid: '' },
{
name: '2023夏季', value: 2.2, sysid: '' },
],
},
]
var column1 = [];
var column2 = [];
this.multiArray = [];
this.typedata.forEach((item, index) => {
column1.push(item.year);
if (index == 0) {
item.children.forEach((item2, index2) => {
column2.push(item2.name);
if (index2 == 0) {
this.sendDate.sysid = item2.sysid;
// console.log('获取的数据',item2)
}
});
}
});
this.multiArray.push(column1);
this.multiArray.push(column2);
Handling selected data changes during scrolling
bindMultiPickerColumnChange(e) {
console.log('修改的列为：' + e.detail.column + '，当前行为：' + e.detail.value);
this.multiIndex[e.detail.column] = e.detail.value;
var column2 = [];
// console.log('this.multiIndex[0]',this.multiIndex[0]); //第一列的当前行
// console.log('this.multiIndex[1]',this.multiIndex[1]); //第二列的当前行
this.typedata.forEach((item, index) => {
// console.log('item',item)
if (index == this.multiIndex[0]) {
item.children.forEach((item2, index2) => {
column2.push(item2.cjname);
if (index2 == this.multiIndex[1]) {
this.sendDate.sysid = item2.sysid;
// console.log('获取的数据',item2)
}
//拖动第一列后第二列对应的数据行数小于拖动前第二列的当前行
if (this.multiIndex[1] > item.children.length-1) {
this.sendDate.sysid = item.children[0].sysid;
//第二列的行回到第一行
this.multiIndex.splice(1, 1, 0);
}
});
}
});
this.multiArray[1] = column2;
this.$forceUpdate(); // 重新渲染
},
btnevt(){
console.log(this.sendDate)
},