ionic实现侧滑的效果

最新推荐文章于 2021-07-31 14:28:53 发布

gh323093

最新推荐文章于 2021-07-31 14:28:53 发布

阅读量1k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78557432

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!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>