NativeScript - 使用另一個UI元素打開NativeScript DropDown小部件

我對Nativescript非常陌生，所以請原諒我的noob問題。我希望我的下拉菜單有更多的瀏覽器，所以我使用PeterStaev的 NativeScript DropDown widget和GridLayout。並設計它。NativeScript - 使用另一個UI元素打開NativeScript DropDown小部件

圖片：

XML：

<GridLayout columns="*,auto" class="drop-down-menu" tap="{{ openDropDown }}"> 
    <dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" col="0" class="drop-down" /> 
    <Label text="&#xf078;" textWrap="false" col="1" class="font-awesome" /> 
</GridLayout>

到目前爲止，我的視圖模型文件：

... 
import { DropDown } from 'nativescript-drop-down'; 

export class RegisterViewModel extends Observable { 
    ... 
    public openDropDown() { 
     console.log('I was tapped’); //this works 
    } 
}

我的代碼隱藏文件找到（.TS）等等遠：

... 
import { RegisterViewModel } from '../../viewmodels/register/register-view-model'; 

export function pageLoaded(args: EventData) { 
    let page = <Page>args.object; 
    page.bindingContext = new RegisterViewModel; 
}

我希望GridLayout上的openDropDown功能打開下拉小部件。也就是說，整個GridLayout區域應該能夠打開下拉菜單，包括font-icon。我真的很感激任何幫助完成這個代碼。或更優雅的解決方案。

來源

2016-10-28 Sam

的nativescript-下拉插件附帶打開下拉的方法，發現這裏的自述：https://github.com/PeterStaev/NativeScript-Drop-Down#methods

所以，你需要的是在你的方法openDropDown去的下拉列表的引用。我會爲下拉UI組件分配一個ID，獲取方法中的下拉列表，然後調用.open(); 這將打開下拉菜單。

對於下面的示例工作，我假設您有一個Page實例設置爲變量頁。還有其他方法可以獲得組件，但這是有效的。

public openDropDown(args: EventData) { 
    console.log('I was tapped’); //this works 
    let page = <Page>args.object; 
    let dropdown = <DropDown>page.getViewById('yourDropDid'); 
    dropdown.open(); 
}

來源

2016-10-28 15:45:48

太棒了。非常感謝布拉德，這工作。我只編輯了你的答案，以顯示我使用的確切代碼。 – Sam

不要認爲在這種情況下'args.object'是'Page'，而是'GridLayout'，你仍然可以調用'getViewById（）'，但是類型不正確。很高興它的工作雖然:) –

就像我說的，我是新的。 :)請繼續並使用更正確的版本編輯代碼，以備將來參考。 – Sam

NativeScript - 使用另一個UI元素打開NativeScript DropDown小部件

回答

相關問題