html5_ionic选项卡操作

最新推荐文章于 2021-06-04 15:16:02 发布

绅V科技

最新推荐文章于 2021-06-04 15:16:02 发布

阅读量989

点赞数

本文链接：https://blog.csdn.net/Android___vv/article/details/78276843

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="ionic/css/ionic.css" rel="stylesheet">
    <script src="ionic/js/ionic.bundle.min.js"></script>
    <script>
        var app = angular.module("myapp",["ionic"]);
        app.config(function($stateProvider, $urlRouterProvider){
            $stateProvider.state("a", {
                //设置一个url,其他地方可以根据url跳到本页面
                url: "/z",
                //自己制作的页面
                templateUrl: "pages/home.html"
            }).state("b", {
                url: "/x",
                templateUrl: "pages/favorites.html"
            }).state("c", {
                url: "/c",
                templateUrl: "pages/setting.html"
            });
            //默认跳到url为z的页面
            $urlRouterProvider.otherwise("z");
        });
    </script>
</head>
<body ng-app="myapp">

<ion-nav-view></ion-nav-view>

<div class="tabs tabs-icon-top">
    <!--两种方式:方式一(href="#home"),方式二(ui-sref="favorites")
                方式二强大一些,使用方式二更好-->
    <a class="tab-item" ui-sref="a">
        <i class="icon ion-home"></i>
        主页
    </a>
    <a class="tab-item" ui-sref="b">
        <i class="icon ion-star"></i>
        收藏
    </a>
    <a class="tab-item" ui-sref="c">
        <i class="icon ion-gear-a"></i>
        设置
    </a>
</div>

</body>
</html>

//自己制作的页面,必须是这样的格式
<ion-view>
    <ion-content>
        内容
    </ion-content>
</ion-view>