NativeScript 动画菜单

NativeScript 模块，为 iOS 应用添加动画菜单。通过一点 Android 动画知识，可以在此之上实现 Android 支持，但结构已存在。

安装

从您的项目的 app 目录运行 npm install nativescript-animated-menu --save

.
├── app  <------------------------------ run npm install from here
│   ├── app.css
│   ├── app.js
│   ├── bootstrap.js
│   ├── main-page.js
│   ├── main-page.xml
│   ├── node_modules
│   │   └── nativescript-animated-menu <-- The install will place the module's code here
│   │       └── ...
│   └── package.json <----------------- The install will register “nativescript-animated-menu” as a dependency here
│   └── tns_modules
│       └── ...
└── platforms
    └── ios

如果 npm 无法为您工作，您可以只需将此存储库的 animatedmenu.js 文件复制粘贴到您的应用中，并直接引用它。

用法

要使用动画菜单模块，请设置一个菜单页面和一个主页面。这些页面将托管菜单的视图和逻辑以及您将从菜单访问的任何其他页面。根页面将托管动画菜单，该菜单引用菜单页面和主页面。

root-page      <-------------this is the page that will host the animated menu element
	└── animated-menu     <------------the animated menu element will reference the menu page and main page (see below)
		└── menu-page
		└── main-page

动画菜单元素

动画菜单本身使用 "main" 和 "menu" 属性引用菜单页面和主页面。

<nu:AniMenu main="main-page" menu="menu-page"></nu:AniMenu>

将菜单触发按钮放置在主页面上的某个位置，并带有加载处理程序，该处理程序将动画菜单与按钮点击连接起来。您必须在您的主页面逻辑中从项目的 node_modules 目录使用 require() 引用动画菜单模块

var aniMenu = require( "./node_modules/nativescript-animated-menu/animatedmenu" );

然后在加载处理程序中连接触发按钮的点击事件，如下所示

function menuBtnLoaded(args) {
    var btn = args.object;
    btn.on('tap', aniMenu.menuTriggerAction);
}
exports.menuBtnLoaded = menuBtnLoaded;