用ionic开发项目有一个月了,遇到了这样一个需求,但是这个需求在官方文档里已经给出,可是没有响应的代码,查了很久官网依然没有找到相对应的代码,让小编非常的气愤,不过好在通过一些手段找到了对应的代码!,想知道是怎么搞得到的代码可以私聊我,接下来看看是不是你们要的需求!看下图:
:
<ion-button (click)="openPicker(2,5,multiColumnOptions)">
Open single Column Picker
</ion-button>
<ion-button (click)="openPicker(1,5,defaultColumnOptions)">
Open Multi Column Picker
</ion-button>
</ion-content>
import { Component, OnInit } from '@angular/core';
import { PickerController } from '@ionic/angular'
//格式化日期的第三方模块
import sd from 'silly-datetime';
@Component({
selector: 'app-datatime',
templateUrl: './datatime.page.html',
styleUrls: ['./datatime.page.scss'],
})
export class DatatimePage implements OnInit {
constructor(public pickercontroller: PickerController) {}
pickerController = document.querySelector('ion-picker-controller');
defaultColumnOptions = [
[
'Dog',
'Cat',
'Bird',
'Lizard',
'Chinchilla'
]
]
multiColumnOptions = [
[
'Minified',
'Responsive',
'Full Stack',
'Mobile First',
'Serverless'
],
[
'Tomato',
'Avocado',
'Onion',
'Potato',
'Artichoke'
]
]
async openPicker(numColumns = 1, numOptions = 5, multiColumnOptions) {
const picker = await this.pickercontroller.create({
columns: this.getColumns(numColumns, numOptions, multiColumnOptions),
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Confirm',
handler: (value) => {
console.log(`Got Value ${value}`);
}
}
]
});
await picker.present();
}
getColumns(numColumns, numOptions, columnOptions) {
let columns = [];
for (let i = 0; i < numColumns; i++) {
columns.push({
name: `col-${i}`,
options: this.getColumnOptions(i, numOptions, columnOptions)
});
}
return columns;
}
getColumnOptions(columnIndex, numOptions, columnOptions) {
let options = [];
for (let i = 0; i < numOptions; i++) {
options.push({
text: columnOptions[columnIndex][i % numOptions],
value: i
})
}
return options;
}
ngOnInit() {
}
如果解决了你的需求,请记得点赞!