ionic 轮播 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>
    <link rel="stylesheet" href="lib/css/ionic.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="lib/js/ionic.bundle.min.js"></script>
    <script src="js/index.js"></script>
    <script src="pages/tour/tour.js"></script>
    <script src="pages/yd/yd.js"></script>
    <script src="pages/tq/tq.js"></script>
</head>
<body ng-app="myapp">
<!--头部-->
    <ion-nav-bar class="bar-assertive">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> 后退
        </ion-nav-back-button>
    </ion-nav-bar>
<!--视图部分-->
    <ion-nav-view animation="slide-left-right">
        <!-- 中间内容 -->
    </ion-nav-view>
</body>
</html>


js方法
var myapp=angular.module("myapp",["ionic"]);
myapp.config(function($stateProvider,$urlRouterProvider) {
    $stateProvider
        .state('tour', {
            url: '/tour',
            templateUrl: 'pages/tour/tour.html',
            controller:"tourCtrl"
        })
        .state('home', {
            url: '/home',
            templateUrl: 'pages/home/home.html'
        })
        .state('yd', {
            url: '/yd',
            templateUrl: 'pages/yd/yd.html',
            controller:"ydCtrl"
        })
        .state('tq', {
            url: '/tq',
            templateUrl: 'pages/tq/tq.html',
            controller:"tqCtrl"
        })
        .state('jd', {
            url: '/jd',
            templateUrl: 'pages/jd/jd.html'
        })
    ;
    $urlRouterProvider.otherwise("/tour");
});
css方法
.slider,.scroll{
    height: 100%;
}
.box{
    color: red;
    text-align: center;
    font-size: 200px;
    line-height: 450px;
}


posted @ 2017-10-19 19:17  年少轻狂为谁争雄?  阅读(100)  评论(0)  编辑  收藏  举报