Question

我正在尝试实现一个列表，我应该从中选择一个项目，我正在尝试使用ListPicker：

<StackLayout verticalAlignment="top">
    <ListPicker id="inquiryType" items="{{ inquiryTypeItems }}" />
</StackLayout>

有没有办法制作ListPicker模式，并通过单击一个只读的TextField来显示它？

我在Nativescript上使用Javascript。

谢谢！

Answer 1

将ListPicker放入模态对话框并不是一个好主意，因为你需要创建平台依赖创建和处理选择器

所以第一种方法是对话框操作，点击打开对话框，选项，选项数组，只有字符串 http://docs.nativescript.org/cookbook/ui/dialogs#action

示例（取自上面的链接，如果它发生它不适用于你并且很少重写你的情况）：

var options = {
    title: "Inquiry Type",
    message: "Choose inquiry type",
    cancelButtonText: "Cancel",
    actions: inquiryTypeItems 
};
dialogs.action(options).then((result) => { 
    console.log(result);
});

或作为第二种方法，

你可以在点击某些内容之后将ListPicker设置为隐藏在页面加载上（绝对不是TextField，因为你可能会遇到显示键盘的问题，无论是标签还是按钮）显示带有动画或可见性属性的ListPicker以及更改或者可能已完成与ListPicker一起使用的按钮可以让人们从项目列表中选择：）

如果你有其他数据和其他属性更好的第二种方法，但如果你有一些简单的字符串数组，你可以使用第一种

Answer 2

我不确定如何在纯NativeScript中执行此操作，但是，如果您使用的是Angular2，则可以使用角度模式，然后将nativescript ListPicker嵌套在其中。

因此Angular2 Modal Project的自述文件描述了非常彻底地创建ui不可知模态。然后在其内容中，您将执行以下操作：

    <div class="container-fluid custom-modal-container">
        <div class="row custom-modal-header">
            <div class="col-sm-12">
                <h1>A Custom modal design</h1>
            </div>
        </div>
        <div class="row" [ngClass]="{'myclass' : shouldUseMyClass}">
            <div class="col-xs-12">
                <div class="jumbotron">
                    <h1>Pick Something:</h1>
                    <ListPicker id="inquiryType" items="{{ inquiryTypeItems }}" />
                </div>
            </div>
        </div>
    </div>`

Here显示了组件如何组合在一起。

您可以在NativeScript中看到issue哪个曲目支持此功能。

模态列表选择器

2 个答案: