滑动

最新推荐文章于 2022-06-14 09:46:27 发布

爱上我的味道

最新推荐文章于 2022-06-14 09:46:27 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/qq_40259191/article/details/78295137

版权

效果：

----------------------------------------------------------------------------------------------------------

代码：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>滑动</title>
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
        angular.module('ionicApp', ['ionic'])

            .controller('SlideController', function($scope) {

                $scope.myActiveSlide = 1;

            })
    </script>
    <style type="text/css">
        .slider {
            height: 100%;
        }
        .slider-slide {
            color: #000;
            background-color: #fff; text-align: center;
            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }
        .blue {
            background-color: blue;
        }

        .yellow {
            background-color: yellow;
        }

        .pink {
            background-color: pink;
        }
        .box{
            height:100%;
        }
        .box h1{
            position:relative; top:50%; transform:translateY(-50%);
        }
    </style>
    <style>
        body{
            position: absolute;
            width: 300px;
            height: 500px;
        }
    </style>
</head>

<body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="SlideController">

<ion-slide-box active-slide="myActiveSlide">
    <ion-slide>
        <div class="box blue"><h1>BLUE</h1></div>
    </ion-slide>
    <ion-slide>
        <div class="box yellow"><h1>YELLOW</h1></div>
    </ion-slide>
    <ion-slide>
        <div class="box pink"><h1>PINK</h1></div>
    </ion-slide>
</ion-slide-box>

</body>
</html>