首页 文章

Nativescript：逻辑控制sideDrawer

提问于
浏览 次
0

Hi there people!

我正在尝试使用导航栏上显示的 Nativescript 和 Javascript 制作侧抽屉 .

我正在使用的包是Telerik Ui for Nativescript .

事实是，即使我在使用滑动手势时可以在导航栏上显示抽屉，我也无法通过 tap="function()" 指令控制它 .

这是我在 main-page.xml 中的代码（我使用 nativescript-telerik-ui 这是免费版而不是 nativescript-telerik-ui-pro ）

<dpg:DrawerPage loaded="pageLoaded" navigatedTo="onNavigatedTo"  
xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns="http://www.nativescript.org/tns.xsd">
<navigation.actionBar>
  <ActionBar title="Drawer Over Navigation" />
</navigation.actionBar>

<dpg:DrawerPage.sideDrawer>
<drawer:RadSideDrawer id="drawer">
  <drawer:RadSideDrawer.drawerContent>
    <StackLayout cssClass="drawerContent">
      <StackLayout cssClass="headerContent">
        <Label text="Navigation Menu"/>
      </StackLayout>
      <ScrollView>
        <StackLayout cssClass="drawerMenuContent">
          <Label text="Primary" cssClass="drawerSectionHeader" />
          <Label text="Social" cssClass="drawerSectionItem" />
          <Label text="Promotions" cssClass="drawerSectionItem" />
          <Label text="Labels" cssClass="drawerSectionHeader" />
          <Label text="Important" cssClass="drawerSectionItem" />
          <Label text="Starred" cssClass="drawerSectionItem" />
          <Label text="Sent Mail" cssClass="drawerSectionItem" />
          <Label text="Drafts" cssClass="drawerSectionItem" />
        </StackLayout>
      </ScrollView>
    </StackLayout>
  </drawer:RadSideDrawer.drawerContent>
</drawer:RadSideDrawer> 
</dpg:DrawerPage.sideDrawer>

<StackLayout cssClass="mainContent">
    <Label text="{{ exampleText }}" textWrap="true" cssClass="drawerContentText"/>
    <Button text="Toggle Drawer" tap="toggleDrawer" />
</StackLayout>
</dpg:DrawerPage>

这是我的 main-page.js

var drawer;

exports.loaded = function(args) {
var page = args.object;
drawer = page.getViewById("drawer");
};
exports.toggleDrawer = function() {
drawer.toggleDrawerState();
};

我点击 Toggle Drawer 按钮（执行 toggleDrawer() 函数）时得到的错误是下一个：

TypeError: Cannot read property 'toggleDrawerState' of undefined.

也许你可以帮我猜猜这里发生了什么，因为我现在对这个错误很困惑 .

Please tell me any additional info I could provide for making this issue clearer.

Thanks in advance! =)

javascript telerik nativescript

2 回答

  • 1

    你可以做到这一点，这样你就永远不会依赖任何全局范围，因为无论它是什么，你只需要点击对象：

    exports.toggleDrawer = function(args) {
    var drawer = args.object;
    drawer.toggleDrawerState();
};
    回复于
  • 0

    我终于修好了！我的 .xml 中的“ loaded ”指令正在调用 pageLoaded() 但该函数不存在！它被称为 loaded() .

    所以我必须修复“已加载”指令：

    <dpg:DrawerPage loaded="loaded" navigatedTo="onNavigatedTo"  
xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns="http://www.nativescript.org/tns.xsd">

    反映功能的名称

    exports.loaded = function(args) {
var page = args.object;
drawer = page.getViewById("drawer");
};

    或者我可以更改函数的名称以反映指令调用（pageLoaded版本）

    <dpg:DrawerPage loaded="pageLoaded" navigatedTo="onNavigatedTo"  
xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns="http://www.nativescript.org/tns.xsd">

    ＆

    exports.pageLoaded = function(args) {
var page = args.object;
drawer = page.getViewById("drawer");
};

    Thank you all for your help! =D

    回复于

相关问题