Tabs

最新推荐文章于 2024-07-22 08:06:45 发布

mzr777

最新推荐文章于 2024-07-22 08:06:45 发布

阅读量181

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mzr777/article/details/78315025

本文介绍了一个使用Ionic框架构建的应用实例，展示了如何通过AngularJS和HTML、CSS实现响应式设计及无限滚动加载等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 href="../lib/css/ionic.css" rel="stylesheet">
    <style>
        img{
            width: 100%;
            height: auto;
        }
        .slider-pager .slider-pager-page{
            color: #fff;
        }
        .item, .item h1, .item h2, .item h3, .item h4, .item h5, .item h6, .item p, .item-content, .item-content h1, .item-content h2, .item-content h3, .item-content h4, .item-content h5, .item-content h6, .item-content p{    white-space: normal;}
    </style>
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <script>
        var myapp=angular.module("myapp",["ionic"]);
        myapp.controller("myCtrl",function($scope,$http){
            $http({
                url:"data.json",
                method:"GET"
            }).then(function(data){
                $scope.data=data.data;
            });
            $scope.loadMore = function() {
                $http.get('data.json').success(function(items) {
                    //useItems(items);
                    Array.prototype.push.apply($scope.data,items);
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
            };

            $scope.$on('stateChangeSuccess', function() {
                $scope.loadMore();
            });
        })
    </script>
</head>
<body ng-app="myapp">
    <ion-tabs class="tabs-positive tabs-icon-top">
        <ion-tab title="首页1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
            <!-- 标签 1 内容 -->
            <!--头部-->
            <ion-header-bar align-title="center" class="bar-positive">
                <div class="buttons">
                    <button class="button" ng-click="doSomething()">左侧按钮</button>
                </div>
                <h1 class="title">Title!</h1>
                <div class="buttons">
                    <button class="button">右侧按钮</button>
                </div>
            </ion-header-bar>
            <ion-content ng-controller="myCtrl">
                <ion-slide-box auto-play="true" slide-interval="2000" does-continue="true">
                    <ion-slide>
                        <div class="box blue"><img src="img/community_02.jpg"></div>
                    </ion-slide>
                    <ion-slide>
                        <div class="box yellow"><img src="img/community_04.jpg"></div>
                    </ion-slide>
                    <ion-slide on-slide-changed="slideHasChanged(index)">
                        <div class="box pink"><img src="img/community_06.jpg"></div>
                    </ion-slide>
                </ion-slide-box>
                <ion-list>
                    <ion-item ng-repeat="item in data">
                        <p>{{item.text}}</p>
                        <img ng-src="{{item.pic}}">
                    </ion-item>
                </ion-list>
                <ion-infinite-scroll
                        on-infinite="loadMore()"
                        distance="1%">
                </ion-infinite-scroll>
            </ion-content>
        </ion-tab>
        <ion-tab title="关于1" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
            <!-- 标签 2 内容 -->
            <p>这个是第2个</p>
        </ion-tab>
        <ion-tab title="设置1" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
            <!-- 标签 3 内容 -->
            <p>这个是第3个</p>
        </ion-tab>
    </ion-tabs>
</body>
</html>