ionic實現側滑的效果
阿新 • • 發佈：2018-12-27
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link rel="stylesheet" href="../ionic_jiabao/css/ionic.min.css"> <script src="../ionic_jiabao/js/ionic.bundle.min.js"></script> <script> angular.module("myapp",['ionic']) .controller("demoC",["$ionicSideMenuDelegate",function ($scope, $ionicSideMenuDelegate) { $scope.toOpen=function () { $ionicSideMenuDelegate.toggleLeft(); }; }]); </script> </head> <body ng-app="myapp" ng-controller="demoC"> <ion-side-menus> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <button class="button button-icon" ng-click="toOpen()"><i class="icon ion-navicon"></i> </button> <h1 class="title">這是主內容</h1> </ion-header-bar> <ion-content> <h1>Content</h1> </ion-content> </ion-side-menu-content> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">我是內容</h1> <div class="content has-header"> <ul class="list"> <li class="item"> Battletoads </li> <li class="item"> Contra </li> <li class="item"> Duck Tales </li> <li class="item"> Mega Man </li> <li class="item"> Metroid </li> <li class="item"> Mike Tyson's Punch-Out </li> </ul> </div> </ion-header-bar> </ion-side-menu> </ion-side-menus> </body> </html>