代码之家 › 专栏 › 技术社区 › rynop

NativeScript Angular ListPicker,其行为类似于`<select>`

nativescript-plugin nativescript-telerik-ui nativescript-angular angular2-nativescript nativescript

0

rynop · 技术社区 · 6 年前

ListPicker 占用大量屏幕空间。有没有办法让它表现得像HTML的隐喻 <select> 什么时候在手机上显示?

this react native plugin 之前,这正是我想要的比喻,但是对于NativeScript。

通过NativeScript很容易做到吗?我想使用特定于平台的select隐喻,因此显示/隐藏 ListPicker 列表选择器 在模态中不是我要找的。

另外,我会有一个相当长的列表,所以 action Dialog 不适合我。

:我知道 nativescript-drop-down 但它不使用特定于平台的“从选项列表中选择”小部件 react native plugin

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select ):

(注意:使用rolodex picker,picker在键盘的位置渲染):

安卓 (注意,带有选项滚动列表):

2 回复 | 直到 6 年前

1

Manoj 6 年前

我想你在找 nativescript-drop-down 它类似于您所指向的react native picker select。

2

0

Narendra 6 年前

here .

Select 在HTML中运行,它将仅使用本机(特定于平台)组件。

在HTML中

<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
  <Label text="Country" width="70" height="50" backgroundColor="red"></Label>
  <TextField [(ngModel)]="textFieldValue" hint="Choose countty..." editable="false" (tap)="showHideField('country')"></TextField>
</StackLayout>
<StackLayout orientation="vertical" width="100%" height="210" *ngIf="showCountryPicker" backgroundColor="lightgray">
  <ListPicker [items]="listPickerCountries" (selectedIndexChange)="selectedCountyChanged($event)"></ListPicker>
</StackLayout>

还有你的.ts文件

showCountryPicker = false;
listPickerCountries: Array < string > = ["Australia", "Belgium", "Bulgaria", "Canada", "Switzerland",
  "China", "Czech Republic", "Germany", "Spain", "Ethiopia", "Croatia", "Hungary",
  "Italy", "Jamaica", "Romania", "Russia", "United States"
];

showHideField() {
  this.showCountryPicker = true;
}
selectedCountyChanged(args) {
  const picker = < ListPicker > args.object;
  this.showCountryPicker = false;
  this.textFieldValue = this.listPickerCountries[picker.selectedIndex];
}