ionic的导航栏配置路由

最新推荐文章于 2020-03-28 17:38:09 发布

SXS120730

最新推荐文章于 2020-03-28 17:38:09 发布

阅读量395

点赞数

分类专栏： Angularjs

本文链接：https://blog.csdn.net/SXS120730/article/details/78294318

版权

Angularjs 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

donghanglan.html

<!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="../lib/css/ionic.css">
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <script>
        var myapp=angular.module("myapp",["ionic"]);
          myapp.config(function ($stateProvider,$urlRouterProvider) {
            $stateProvider.state("sy",{
                url:"/sy",
                templateUrl:"sy/sy.html",
                controller:"syCtrl"
            })
                .state("zy",{
                url:"/zy",
                templateUrl:"zy/zy.html",

            })
                .state("tq",{
                    url:"/tq",
                    templateUrl:"tq/tq.html",
                   controller:"tqCtrl"
                })
                .state("jd",{
                    url:"/jd",
                    templateUrl:"jd/jd.html",
                    controller:"jdCtrl"
                })
                .state("ct",{
                    url:"/ct",
                    templateUrl:"ct/ct.html",
                    controller:"ctCtrl"
                })
            $urlRouterProvider.otherwise("/sy")
        })
    </script>
    <link rel="stylesheet" href="sy/sy.css">
    <script src="sy/sy.js"></script>
    <link rel="stylesheet" href="zy/zy.css">
    <script src="tq/tq.js"></script>
    <script src="jd/jd.js"></script>
    <script src="ct/ct.js"></script>


</head>
<body ng-app="myapp">
<!--导航-->
<ion-nav-bar class="bar-assertive">
    <ion-nav-bar>
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> 返回
        </ion-nav-back-button>
    </ion-nav-bar>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right">
    <!-- 中间内容 -->
</ion-nav-view>

</body>
</html>

sy.html

<!-- ion-view的标题会在导航栏显示 -->
<ion-view title="八维度假村">
    <ion-nav-buttons side="right">
        <button class="button" ng-show="show" ui-sref="zy">
            进入
        </button>
    </ion-nav-buttons>
    <!-- 页面的内容 -->
    <ion-content>
        <!--图片的引导页-->
        <ion-slide-box auto-play="true" slide-interval="2000" on-slide-changed="slideHasChanged(index)">
            <ion-slide>
                <div class="box blue"><i class="ion ion-flag"></i></div>
            </ion-slide>
            <ion-slide>
                <div class="box yellow"><i class="ion ion-wineglass"></i></div>
            </ion-slide>
            <ion-slide >
                <div class="box pink"><i class="ion ion-android-call"></i></div>
            </ion-slide>
        </ion-slide-box>

    </ion-content>
</ion-view>

sy.css

.box{
    margin-top: 200px;
    font-size: 100px;
    color: red;
    text-align: center;
}
.slider,.scroll{
    height: 100%;
}

sy.js

angular.module("myapp").controller("syCtrl",function ($scope,$ionicSlideBoxDelegate) {
    $scope.show=false;
    $scope.slideHasChanged=function(index){
        /*  console.log(index);
         console.log($ionicSlideBoxDelegate.count());*/
        if(index==$ionicSlideBoxDelegate.count()-1){
            $scope.show=true;
        }else{
            $scope.show=false;
        }
    }
})

zy.html

<!-- ion-view的标题会在导航栏显示 -->
<ion-view title="我的主页">

    <!-- 页面的内容 -->
    <ion-content>
       <!--列表-->
        <ion-list>

            <ion-item class="item" ui-sref="jd"><i class="ion ion-android-call"></i>酒店预订</ion-item>
            <ion-item class="item"  ui-sref="ct"><i class="ion ion-beer"></i>餐厅</ion-item>
            <ion-item class="item"  ui-sref="tq"><i class="ion ion-umbrella"></i>天气预报</ion-item>


        </ion-list>


    </ion-content>
</ion-view>

zy.css

.item{
     margin-top: 30px;
    text-align: center;
    color:#aaaaaa;
    font-size: 30px;

}
.item:hover{
    color:red;
}
.item:active{
    color:blue;
}

jd.html

<!-- ion-view的标题会在导航栏显示 -->
<ion-view title="酒店预订">

    <!-- 页面的内容 -->
    <ion-content>
        <!--列表-->
        <ion-list>

            <ion-item><i class="ion ion-ios-home"></i>房间号：{{data.room}}</ion-item>
            <ion-item><i class="ion ion-wifi"></i>wifi密码：{{data.wifi}}</ion-item>
            <ion-item><i class="ion ion-ios-clock-outline"></i>入住时间：{{data.checkin|date:"yyyy-MM-dd"}}</ion-item>
            <ion-item><i class="ion ion-ios-clock"></i>退房时间：{{data. checkout|date:"yyyy-MM-dd"}}</ion-item>
            <ion-item><i class="ion ion-clipboard"></i>总价 ：{{data. price|currency:"￥"}}</ion-item>
        </ion-list>


    </ion-content>
</ion-view>

jd.js

angular.module("myapp").controller("jdCtrl",function ($scope) {
    $scope.data = {
        room:"3302",
        checkin:new Date(),
        checkout:new Date(Date.now() + 7*24*60*60*1000),
        wifi:"hello123",
        price:268.00
    };
})

tq.html

<ion-view title="天气查询">

    <!-- 页面的内容 -->

    <ion-content>
        <spa>天气预报查询：</spa><input type="text" ng-model="sr" placeholder="请输入查询的城市" ng-click="cx(sr)" style="width:300px">
        <!--列表-->
        <ion-list>

            <ion-item>天气情况：{{data.HeWeather5[0].now.cond.txt}}</ion-item>
            <ion-item> 温度：{{data.HeWeather5[0].now.tmp}}℃</ion-item>
            <ion-item> 风速：{{data.HeWeather5[0].now.wind.spd}}</ion-item>
            <ion-item> 风向：{{data.HeWeather5[0].now.wind.dir}}</ion-item>
        </ion-list>


    </ion-content>
</ion-view>

tq.js


angular.module("myapp").controller("tqCtrl",function ($scope,$http) {
    $scope.sr="北京";
     $scope.cx=function (sr) {
         $http({
             url:"https://free-api.heweather.com/v5/weather?city="+sr+"&key=545d63e185fc48169a43cbabba6e74d2",
             method:"GET"
         }).then(function(data){

             $scope.data=data.data;
         })
     }



})

ct.html

<!-- ion-view的标题会在导航栏显示 -->
<ion-view title="餐厅主页">

    <!-- 页面的内容 -->
    <ion-content>
        <!--列表-->
        <ion-list>
            <ion-item ng-repeat="item in data.restaurants">
                <p>{{item.name}}</p>
                <img ng-src="{{item.image_url}}"/>
                <p>{{item.address}}</p>
                <p>{{item.phone}}</p>
            </ion-item>

        </ion-list>


    </ion-content>
</ion-view>

ct.js


angular.module("myapp").controller("ctCtrl",function ($scope,$http) {
   $http({
       url:"ct/restaurants.json",
       method:"GET"
   }).then(function (data) {
      $scope.data=data.data;
      console.log( $scope.data);
   })
})

SXS120730

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic的导航栏配置路由

donghanglan.html Title var myapp=angular.module("myapp",["ionic"]); myapp.config(function ($stateProvider,$urlRouterProvider) { $stateP
复制链接

扫一扫