Question

嗨，有人！

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

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

这是关于action bars that are shown over the navigation
这是关于logic control of the drawer

这是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();
};

点击切换抽屉按钮（执行 toggleDrawer（）功能）时出现的错误是下一个：

TypeError: Cannot read property 'toggleDrawerState' of undefined.

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

请告诉我我可以提供的任何其他信息，以便更清楚地解决此问题。

提前致谢！ =）

Answer 1

你可以做到这一点，这样你就永远不会依赖任何全球范围，因为无论它是什么，它都会取而代之的是对象：

exports.toggleDrawer = function(args) {
    var drawer = args.object;
    drawer.toggleDrawerState();
};

Answer 2

我终于修好了！我的<＃34; 已加载＆＃34;我的 .xml 中的指令正在调用pageLoaded()，但该功能不存在！它被称为loaded()。

所以我必须修复＆＃34;加载＆＃34;指令：

<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");
};

谢谢大家的帮助！ = d

Nativescript：逻辑控制sideDrawer

2 个答案: