首页 文章

Nativescript - 在按钮单击时打开SideDrawer

提问于
浏览 次
2

我使用telerik ui作为原生脚本 . 我需要在顶部的切换按钮打开侧面菜单 . 但我无法根据文档调用 Showdrawer() . 我需要的是按钮点击侧面菜单应该打开 . 我试着拨打 RadSideDrawer.prototype.showDrawer() ，但失败了 . Nativescript 还有其他侧面菜单吗？

主page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:drawer="nativescript-telerik-ui/sidedrawer" loaded="pageLoaded">
    <Page.actionBar>
        <ActionBar>
            <android>
                <NavigationButton text="Go Back" android.systemIcon="ic_menu_moreoverflow" tap="showSideDrawer" />
            </android>
        </ActionBar>
    </Page.actionBar>
    <drawer:RadSideDrawer>
        <drawer:RadSideDrawer.mainContent>
            <StackLayout>
                <Label text="{{ mainContentText }}" textWrap="true" />
            </StackLayout>
        </drawer:RadSideDrawer.mainContent>
        <drawer:RadSideDrawer.drawerContent>
            <StackLayout cssClass="drawerContent" style="background-color:white;">
                <StackLayout cssClass="headerContent">
                    <Label text="Header" />
                </StackLayout>
                <StackLayout cssClass="drawerMenuContent">
                    <Label text="Item 1" style="color:black;" />
                    <Label text="Item 2" style="color:black;" />
                    <Label text="Item 3" style="color:black;" />
                    <Label text="Item 4" style="color:black;" />
                </StackLayout>
            </StackLayout>
        </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer>
</Page>

越来越开工，model.js

var observableModule = require("data/observable");
var GettingStartedViewModel = (function (_super) {
    __extends(GettingStartedViewModel, _super);
    function GettingStartedViewModel() {
        _super.call(this);
        this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
            + " has a default transition and position and also exposes notifications related to changes in its state.");

    }
    return GettingStartedViewModel;
})(observableModule.Observable);
exports.GettingStartedViewModel = GettingStartedViewModel;
function showSideDrawer(args) {
    console.log("Show SideDrawer tapped.");
    // Show sidedrawer ...
   _super.prototype.showDrawer.call(this);

}
exports.showSideDrawer = showSideDrawer;

主页面.js

var viewModelModule = require("./getting-started-model");
function pageLoaded(args) {
    console.log("Page loaded");
    var page = args.object;
    page.bindingContext = new viewModelModule.GettingStartedViewModel();
}
exports.pageLoaded = pageLoaded;
nativescript nativescript-telerik-ui

4 回答

  • 1

    你是否从你没有发布的代码中调用showSideDrawer函数？你确定你联系了水龙头按钮吗？

    <Button tap="showSideDrawer" text="ToggleDrawer"/>

    也许您可以尝试给sideDrawer一个Id并使用此代码 .

    var drawer = frameModule.topmost().getViewById("sideDrawer");
drawer.showDrawer();
    回复于
  • 2

    您可以查看显示RadSideDrawer主要功能的this SDK examples . 正如@R Pelzer所提到的，你需要做的就是使用它的id来获取RadSideDrawer的实例：

    import drawerModule = require("nativescript-telerik-ui-pro/sidedrawer");
import frameModule = require("ui/frame");

var sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>(frameModule.topmost().getViewById("sideDrawer"));

    并调用其 showDrawer() 方法：

    sideDrawer.showDrawer();
    回复于
  • 1

    你收到 undefined 因为没有为抽屉分配id所以为了解决你的问题，为sideDrawer分配一个id <drawer:RadSideDrawer id="sideDrawer"> 然后你可以调用

    var frame = require('ui/frame');
var drawer = frame.topmost().getViewById("sideDrawer");

function showSideDrawer(){
drawer.showDrawer();  // i prefer using .toggleDrawerState();
};
    回复于
  • 0

    在我的情况下，我错过了插入，因此，当调用toggleDrawer时，有一个缺少的组件，因此错误“TypeError：无法读取未定义的属性'toggleDrawerState'” .

    尝试在此处插入xml文件的所有正文组件可能会解决问题 .

    快乐的编码:)）

    回复于

相关问题