前言:
用ionic开发项目有一个月了,遇到了这样一个需求,但是这个需求在官方文档里已经给出,可是没有响应的代码,查了很久官网依然没有找到相对应的代码,让小编非常的气愤,不过好在通过一些手段找到了对应的代码!,想知道是怎么搞得到的代码可以私聊我,接下来看看是不是你们要的需求!看下图: :
对应的代码:
page.html:
<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
>
page.ts
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() {
}
后记:
如果解决了你的需求,请记得点赞!
